如何使用字体图标

字体图标：用字体文件取代图片文件，来展示图标、特殊字体等元素的方法^[1]
优点： 加载文件体积小、风格统一、可以通过font-size，color像文字一样控制。

1. 生成字体文件

可以借助阿里图标库，创建项目 添加图标，字体文件可以下载到本地使用或使用阿里为你生成的cdn文件。
阿里图标库会生成4种字体文件：eot, woff, woff2, ttf, svg ^[2]
Iconfont图标使用说明

2. css文件引入字体

xx.css

@font-face {
    font-family: "custom-icon-font-name" ;
    src: url('https://xxxx/font/xxx.eot') format('embedded-opentype'),
          url('https://xxxx/font/xxx.ttf') format('truetype'),
          url('https://xxxx/font/xxx.woff2') format('woff2'),
          url('https://xxxx/font/xxx.woff') format('woff')
          url('https://xxxx/font/xxx.ttf') format('truetype')
}
.custom-icon-font {
     font-family:"custom-icon-font-name";
     font-sizxe:16px;
}

3. 用class或unicode方式引用

3-1 class方式
xx.css

.icon-user:before{
  content:"\e6b1";
}

xx.html

3-2 unicode方式
xx.html



tips:阿里图标库中的文档说，使用字体图标的方式中，symbol引用 是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法Iconfont图标使用说明

---

1. H-ui前端框架 3.7图标 ↩

2. 使用@font-family时各浏览器对字体格式（format）的支持情况 ↩