字体图标的下载与使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wxw20147854/article/details/80880642

    标题：学习与分享CSS的字体图标

    学习目的：减少资源占用，缓解浏览器与后台的压力

    网址：http://www.icomoon.io（此篇文章已此网址为例，国外网站，网速有点慢，不过个人喜欢这个网站一些）、http://www.icofont.cn

    步骤：

    （1）进入网站，点击右上角的按钮，会进入第二步

    （2）以下是点击按钮之后的页面：

    （3）第二步中点击“Generate Font”按钮后，会进入以下界面：

    （4）下载的文件目录如下：

        （a）fonts文件夹：粘贴入项目下

        （b）selection.json：这个文件不能删除，在后续若是要添加新的字体图标时需要用到

        （c）style.css：在CSS样式表中需要用到此文件中的引用

    （5）打开style.css文件，将其中的 @font-face {...} 这一段代码粘贴到项目CSS文件中，注意：（1）在src两个属性的值中，路径必须是当前页面对该文件的相对路径，不能错；（2）font-family的值是字体图标的名称，可以自己修改，但是在其他地方引用时候必须一致：

        

    （6）打开，打开第4步中的“demo.html”文件，如图：

    

    （7）第6步中有两个框，使用方法如下：

        （a）第一个：在CSS文件中使用伪元素选择器:before或:after进行插入，注意必须要加反斜杠，例如：

            div:after{content:"\e900"}

        （b）第二个：点击并复制粘贴到HTML文件对应的位置即可

    （8）第一种的网页成品图（第二种只是复制粘贴，不演示了）如下：

        

    以上是我自己的总结，如有不懂或文章有错，请在评论区提出，谢谢关照！