字体图标

来源

iconfont-阿里巴巴矢量图标库
教程
- 1、打开网页，搜索图标，比如“方框”
- 2、鼠标移到喜欢的图标，点击“购物车”按钮
- 3、点击右上方购物车，右侧会弹出(需要登录)
  - 可以直接下载代码
  - 或者添加到项目，多个一起下载
- 4、下载后解压，得到如下有用的文件
  - iconfont.ttf
    - 需要放到项目根目录下的/static/iconfont
  - demo_index.html
    - 内含教程，可打开参考
- 5、把下列代码添加到公共 css 文件中(定义字体名)
```
@font-face {
  font-family: "iconfont";
  src: url("./static/iconfont/iconfont.ttf") format("truetype");
}
```
  - 这里的 iconfont 可以自己命名，用作后面的 font-family 值
- 6、用字体名生成一个样式
```
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```
- 7、在页面内使用此样式
```
<span class="iconfont">&#xe8e2;</span>
```
  - 这里是下载的图标的编号
    - 其中 e8e2 是 unicode 式的编码
    - 4 位 16 进制，相当于 16 的 4 次方 = 65536 个
    - 阿里巴巴库的图标数绝对超过此数值，而上面下载的图标 id 是 1727514，所以应该是对同一个下载包里面的做了这样的命名