图片缺点是增加了总文件大小，不能很好地进行“缩放”，因为放大和缩小会失真
字体图标（iconfont）可做出跟图片一样的事，改变透明度、 旋转度等，但其本质是文字，可以很随意地改变颜色、产生阴影、透明效果等，本身体积更小但携带的信息没有削减，几乎支持所有的浏览器，移动端设备必备
使用流程
❶ UI人员设计字体图标效果图(svg)，在 illustrator 或 Sketch 这类矢量图形软件中创建 icon 图标之后保存为 svg 格式
❷ 前端人员上传生成兼容性字体文件包
❸ 前端人员下载兼容性字体文件包
❹ 把字体文件包引入HTML页面中
一般是用现成的，常用网站：阿里icon font字库、Font-Awesome、icomoon字库、fontello等
 
下载阿里的字体图标后里面会有使用说明，阿里的字体图标有三种引入方式：unicode、font-class和symbol方式
unicode方式

unicode 方式应该是最开始接触最熟悉的方式，在 css 中像定义 Web 字体一样，定义将要使用的 iconfont 的名字还有引入地址，再在类样式中使用此字体，设置大小颜色等，最后在元素里添加类并粘贴字体编码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         @font-face{
  8.             font-family: \'iconfont\';
  9.             src: url(\'iconfont/iconfont.eot\');
  10.             src: url(\'iconfont/iconfont.eot?#iefix\') format(\'embedded-opentype\'),
  11.             url(\'iconfont/iconfont.woff\') format(\'woff\'),
  12.             url(\'iconfont/iconfont.ttf\') format(\'truetype\'),
  13.             url(\'iconfont/iconfont.svg#iconfont\') format(\'svg\');
  14.         }
  15.         .iconfont{
  16.             font-family: "iconfont";
  17.             font-size:16px;
  18.             font-style: normal;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <i class="iconfont"></i>
  24. </body>
  25. </html>

也可以使用伪元素的方式添加字体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style> 
  8.       <!--同上，略-->
  10.         .iconfont{
  11.             font-family: "iconfont";
  12.             font-size:16px;
  13.             font-style: normal;
  14.         }
  15.         i::before{
  16.             content:"\e602";
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <i class="iconfont"></i>
  22. </body>
  23. </html>

字体编码在 html 中是  ，在 css 中是 \e602

font-class方式 

font-class 方式是引入其 css 文件，该定义该设置的此文件已经帮做好，所以我们直接用类样式就能使用对应的字体图标

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
  7. </head>
  8. <body>
  9.     <i class="iconfont icon-aixin"></i>
  10. </body>
  11. </html>

symbol方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         .icon {
  8.             width: 1em; height: 1em;
  9.             vertical-align: -0.15em;
  10.             fill: currentColor;
  11.             overflow: hidden;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <svg class="icon" aria-hidden="true">
  17.     <use xlink:href="#icon-aixin"></use>
  18. </svg>
  19. <script src="iconfont/iconfont.js"></script>
  20. </body>
  21. </html>

这种方式是第一次使用，直接照说明文档做即可，感觉不如 font-class 方式简便，但支持多色图标是一大优点

版权声明：本文为Grani原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Grani/p/9610115.html