iconfont.cn图标的运用

最新推荐文章于 2024-08-17 21:52:26 发布

Dream8023

最新推荐文章于 2024-08-17 21:52:26 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/Dream8023/article/details/94868913

版权

一、下载图标

1、先进入iconfont.cn页面
在这里插入图片描述
2、登陆，并选择你要用的图标加入购物车

3、点击购物车，并点击下面的添加至项目，自己取一个项目的名字。

在这里插入图片描述
4、在我的项目里下载至本地

5、出现一个含有这几项内容的文件夹，其中demo是说明文件，而iconfont是我们需要的文件，iconfont.woff 和 iconfont.woff2 一样，但我们最好用iconfont.woff 。

6、新建一个文件夹取名css，在里面再建一个iconfont文件夹把这几个文件放在里面使用
在这里插入图片描述
二、使用图标
1、建立文件夹，是上面建立的css和新建的html在一个文件夹里。
2、在HTML中插入css文件
运用
3、在body里面插入一个 i 标签，在我的项目里复制图标代码
注： i 标签中间插入 图标代码
在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
</head>
<body>
    <i class="iconfont icon-xingji">&#xe743;</i>
</body>
</html>

注：上面案例中 i 标签，也可以换为其他的标签，但最好用 i 标签
案例效果：
在这里插入图片描述