iconfont 字体图标

1.iconfont使用（本地没有svg）

阿里巴巴矢量库（iconfont-阿里巴巴矢量图标库）

1）注册账户

2）把要用的图标添加入库（购物车）

3）点击购物车，将想要的图标添加到项目中

 

 

4）下载到本地使用

5）三种使用方法

1. unicode 引用
2. symbol 引用
3. font-class 引用

 2.iconfont 使用(本地有 svg)
a. 图标字体: 使用 IcoMoon 将 SVG 格式的图标转换生成图标字体及样式
b. 进入 icoMoon 官网: https://icomoon.io/
c. 点击右上角 , 进入处理页面
d. 点击左上角 , 选择 resource\SVG\*.svg, 上传显示到页面
e. 在页面选择所有 svg, 点击右下角 生成图标字体样式
f. 点击左上角 指定 Font-Name 为 sell-icon, 点击右下角 下
载到本地
g. 解压 zip 包, 访问 demo.html 测试
h. 我们项目需要的是 fonts 和 style.css

3.在页面中引入在线的 iconfont 样式

<link rel="stylesheet"
href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css">

优点：

减少请求次数

将多个 icon 合并到一个字体文件中，从而提高网页性能；

自由的变化大小和颜色，因为字体是可以通过样式来设置大小和颜色的；

矢量图不失真；

适合多平台（浏览器、iOS App、Android App）；

缺点：

单色

维护成本高