iconfont 为大家提供了很多开箱即用的图标库,同时也提供了灵活的集成办法。
在一个项目中嵌入你想要iconfont字体图标,跟着下面的步骤一步步来实践一下:
创建项目
在 iconfont 的【资源管理 => 我的项目】中创建一个项目,取个名字,字体格式根据需求选择,一般就默认加上一个Base64。
将图标添加到项目
方法就是在素材库中搜索想要的图标,然后点图标上的购物车图标(添加入库),然后在右上角的购物车中添加到你刚新建的项目中。
获取代码
在项目页面下载代码到本地:
嵌入项目
下载解压后的目录包含:
其中 demo_index.html
是告诉你怎么用的,根据自己需要选择引用方式,我这边使用 Font class
的方式,将下载到的代码中需要的文件放到项目资源目录下,然后在页面中引入 iconfront.css
即可,说明:
在使用时,比如我这次选了几个图标中,有微信图标他的class类是 icon-wechat
,那我在页面上只需要使用:
<span class="iconfont icon-wechat"></span>
就可以正常显示微信图标了。
后期如果有更多图标加入,只需要将图标加入到项目,然后重新下载代码然后覆盖那些需要的文件可以了。
线上模式嵌入
iconfont 还提供了线上模式集成只需要在项目界面生成一下代码,然后将生成的css地址嵌入即可,也可以尝试一下。