iconFont在项目中的使用

iconfont在项目中的使用

在实际的项目开发中需要使用各种类型的图标，阿里巴巴图标库iconfont是一个出色的图标库，在这里记录一下iconfont的具体使用

在iconfont站点选择自己喜欢的图标

将需要的图标放入自己的购物车中

在购物车中已代码下载的方式下载图标

将下载好的文件引入到项目中

import './assets/font_qivc8s28qw/iconfont.css'
import './assets/font_qivc8s28qw/iconfont.eot'
import './assets/font_qivc8s28qw/iconfont.ttf'
import './assets/font_qivc8s28qw/iconfont.svg'

以上主要使用的是四个文件，将这四个文件引入项目中即可

使用方式

你可以打开下载的html的demo文件，中可以查看相应的引入方式

方式一：Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
找到demo中的unicode代码此时直接在页面中引用

<span class="iconfont">&#x33;</span>

方式二：font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

在引入了上面说明的四个文件基础下,找到demo中的class类名直接在页面中引用即可

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

第三种方式没有使用过，就不在此介绍