iconfont的Unicode和Font class使用方法

iconfont是国内功能很强大且图标内容很丰富的矢量图标库，可以说是国内所有前端程序员都要求掌握的东西，而今天我也给大家分享一下iconfont的Unicode和Font class两种使用方法。

1、浏览器搜索iconfont并进入官网，在搜索框中查找你想要使用的图标，如下图所示：

2、搜索出来的图标可以添加入库，也可以收藏或下载，这里选择添加入库。

3、右上角有一个购物车的图标，点击后会显示已添加入库的图标，将想要使用的图标选择添加至项目。选择后会出现你目前已经创建的项目，如果还未创建项目，那就新建一个项目并将使用的图标放入这个项目中。

4、将图标添加至项目后会自动跳转至这个项目中，当然你也可以在上方导航栏中选择资源管理,再进入我的项目。

5、图标的使用

进入项目之后可以看到图标的在线链接使用方式其实有三种：Unicode、Font class、Symbol，这里我们只介绍前两种（emmmm...，因为第三种我也没用过，一般来说前两种也绝对够用了）

（1）Unicode使用方式：

选择Unicode，然后点击‘暂无代码，点击生成’

复制生成的代码，将这串代码放入到想要引用页面的css文件中，同时加入下面一串代码：

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

如下图所示：

注意：如果你进行的是网页开发，那么复制的代码中的在线链接必须加入https:或http:，否则图标将会引入失败！

css文件内容写好后，返回到iconfont官网复制图标代码，如下所示。

将赋值好的代码引入到html中想要使用的地方，并添加class类：class="iconfont"，如下所示：

（2）Font class使用方式：

选择Font class，官网会直接给你提供一个图标的使用链接，但是我们最好不要直接点击复制这串代码，而是点击这个链接，点击链接后会出现一串css代码，将其都复制下来。

将复制的css代码放到相应css文件中，而后将图标引入到想要使用的html页面中。

相应图标的类名可以在官网或复制的css代码找到。

OK，以上就是iconfont图标的两种使用方式，相信大家也可以看出来了，Unicode和Font class两种使用方法类似，区别就在于Unicode这种方法设置图标样式时是对一个项目中的所有图标进行修改，而Font class这种方法则是对每一个单独的图标的使用更加灵活，所以不同的场景大家可以选择不同的使用方式。