iconfont该如何使用,iconfont的使用方法
2019-11-05 本文已影响0人
houxnan
第一步:在搜索引擎搜索“iconfont”进入其官网:https://www.iconfont.cn/
第二步:新建项目,之后将搜索的图标添加到项目中。

第三步:在iconfont首页搜索“相机”、“消息”等关键词,找到自己所需的图标,将图标加入购物车。
第四步:将所需图标都加入到购物车之后,将其加入到项目中去

第五步:将项目中的图标代码下载到本地,点“下载到本地”或“download”
第六步:下载至本地后,将文件夹放入到自己项目的css文件夹中,

第七步:打开这个文件夹,里面有个iconfont.css文件,将文件中的@font-face等代码复制到自己的css文件中


第八步:要在自己的html中将iconfont文件引入,如图:

第九步:在使用的时候,如图:

注意引入时的名称是iconfont XXX,后面的xxx就是在iconfont网站上显示的名字,如图

按照如图,引入时,class="iconfont iconiconfontzhizuobiaozhun023133"
class="iconfont iconerweima"
class="iconfont iconfanhuidingbu-"
最后,如果想要这个图标点击可跳转至页面顶端或低端或者跳到其他页面的话,可以用a标签包裹住i标签,如:
<a href="#top"><i class="iconfont iconfanhuidingbu-"></i></a>
而不是i包裹住a标签:<i><a></a></i>,这样是无法完成跳转的。