字体图标「这是我参与11月更文挑战的第N天，活动详情查看：2021最后一次更文挑战」。在我们日常写网页中，总是会遇到各

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。在我们日常写网页中，总是会遇到各种各样的字体图标，如果想知道关于字体图标在哪下载？如何使用？代码如何书写？就请往下看哦~（这是我第一次写文，如果有错误的地方，不好的地方，欢迎各位大佬指点，让我变得更好）

一.字体图标的网站：www.iconfont.cn

这个网站是里面有各种各样的字体图标，你可以找到各种各样你想用的图标。

1.网站图标下载方法：

（1）打开网站之后点开自己想要的图标，没有看到自己想要的可以点搜索

开开.PNG

（2）.鼠标滑动到图标上会出现加入购物车（不需要付钱）

图标加入购物车.PNG

（3）.找到购物车，点进去

找到购物车.PNG

（4）.点添加至项目，没有就自己创建一个项目

添加.PNG

（5）.添加到项目之后就会进入自己的项目图标页面，找到下载到本地，它就会把你需要的图标打包压缩下载下来

下载.PNG

2.图标下载好之后，将压缩包减压，放进自己写代码的文件夹里，打开自己要写的页面

（1）链入iconfont.css文件（必须步骤）

<link rel="stylesheet" href="./font_2910629_7scgw7xtbeh/iconfont.css">

（2）用法方法一：在自己需要调用图标的地方，调用iconfont里的公共类名和自己用的图标类名

<div class="iconfont icon-juzhong"></div>

（3）先写iconfont的公共类，然后再将Unicode写在标签里（unicode在iconfont文件夹里有个html网页，点开就可以看到）

<div class="iconfont">&#xe8b6;</div>

（4）在css里面给要用字体图标的标签创建一个伪元素

<style>
        span::before {
         /* 在iconfont.css里可以找到 */
            content: "\e68a";
            font-family: 'iconfont';
        }
    </style>

<body>
    <span></span>
   </body>

3.字体图标的优点

（1）灵活性，可以随意调整大小颜色且不模糊，是矢量图

（2）内存小，减轻服务器的压力

4. 注意点

字体图标大小更改不了可能和权重有关

因为添加的类的权重是10，直接用标签更改样式权重低，所以没法显示样式，加权就可以

字体图标