阿里图标库iconfont的使用（font-cclass方式、symbol方式、动态创建方法）

iconfont的使用

font-class引用

特点

1. 兼容性良好，支持ie8+，及所有现代浏览器。
2. 使用class来定义图标，替换图标时，只需要修改class里面的unicode引用。
3. 本质上是使用字体，所以多色图标不支持。

使用方法

1. 网络引用

   1. 第一步：拷贝项目下面生成的fontclass代码：

      //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
      

   2. 第二步：挑选相应图标并获取类名，应用于页面：

      <i class="iconfont icon-xxx"></i>
      

2. 本地引用

   1. 第一步：将项目下载到本地，通过以下方式进行引入：

      <style>
      	@import '../../assets/font/iconfont.css';
      </style>
      

   2. 第二步：挑选相应图标并获取类名，应用于页面：

      <i class="iconfont icon-xxx"></i>
      

symbol引用

特点

1. 支持多色图标。
2. 支持像字体那样，通过font-size,color来调整样式。
3. 兼容性较差，支持 ie9+,及现代浏览器。
4. 浏览器渲染svg的性能一般，还不如png。

使用方法

1. 网络引用（配合 ant-design 组件库）

   1. 第一步：拷贝项目下面生成的symbol代码：

      //at.alicdn.com/t/font_