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这种方法则是对每一个单独的图标的使用更加灵活,所以不同的场景大家可以选择不同的使用方式。