字体图标的用法

字体图标网站：
醉牛前端：http://f2er.club/
阿里巴巴图标库：http://www.iconfont.cn/
制作字体图标网站：https://icomoon.io/ （以该网站为例子）

生成字体图标：
第一步：点击右上角的紫色图标

12.png

第二步：直接选择（单击）想要的图标 -->制作成-->字体（点击右下角Grenerate Font ）

13.png

第三步：或者导入自己的图标（点击左上角 import incons） -->制作成-->字体

15.png

第四步：点击右下角的download（下载）

第五步：解压后，font文件夹里面的字体，就是我们想要的字体图标

16.png

到此我们已经成功将图片变成字体图标

使用字体图标
第一步：查看图标对应的字体编码：在demo.html文件中查看

18.png

第二步：

17.png

执行效果：

19.png

源代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>

 <style>

 /* 定义一个叫做“xmg”字体，引用多种字体的目的是适配各种机型 */
 @font-face {
     font-family: 'xmg';
     src: url('font/icomoon.eot') format('embedded-opentype'),
     url('font/icomoon.svg') format('svg'),
     url('font/icomoon.ttf') format('truetype'),
     url('font/icomoon.woff') format('woff');
 }
 
 /*匹配以icon-开头的class*/
 [class^='icon-'],

 /*匹配存在icon-字符串class*/
 [class*='icon-']{
     font-family: xmg;
     font-style: normal;
 }

 i::before{
     content: '\e901';
 }
 span::before{
     content: '\e91a';
 }
 div::before{
     content: '\e90f';
 }
 </style>
 </head>
 <body>
      <i class="icon-i">在i之前添加字体图标</i>
      <span class="icon-span">在sapn之前添加字体图标</span>
      <div class="icon-div">在div之前添加字体图标</div>
 </body>
 </html>

字体文件格式
eot : embedded-opentype
svg : svg
ttf : truetype
woff : woff

字体图标的用法

推荐阅读更多精彩内容