【移动web篇】字体图标的下载及使用

字体图标

• 字体图标的优点
  1.他是文本内容，矢量图，放大不会失真
  2.因为是文本所以可以用文本的样式来设置

• 字体图标与精灵图比较
  1.精灵图可以将多个图存放在一个文件上，所以请求只有一次，但是精灵图存在放大会失真的问题
  2.字体图标因为是矢量图由点、线、面组成，所以不会存在放大失真的问题

字体图标的下载及使用

iconfont下载链接：

https://www.iconfont.cn/
https://icomoon.io/app/#/select

ali-iconfont使用：

1. 选择字体图标，加入购物车
2. 添加至新创建的本地项目
3. 点击创建项目找到下载至本地按钮
4. 下载后进行解压缩，解压缩后重命名’iconfont’
5. 复制到项目的根目录
6. 项目内引用

<!-- 
1.用link标签引入iconfont.css文件；
2.用i标签承接字体图标，<i class="iconfont icon-xxx"></i>
 -->
<div class="box">
    <div class="iconfont icon-cancle"></div>
  </div>

<!-- 2.通过