Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。
本文我们就来一起学习一下iconfont字体图标库的使用吧。
效果图:
首先,搜索一下iconfont:
选择第一个链接,点进去:
登录进去,我这边用的是自己的github账号。登录成功后,选择我的项目,去新建一个项目:
项目新建好了以后,内部还没有任何图标,接下来,我们可以类似淘宝购物一样去获取想要的图标。
看到你喜欢的图标,选择添加入库!
也可以直接在搜索栏进行图标的搜索!
挑选完毕之后,我们还需要把库里的图标添加至项目:
复制一下代码,接着在对应的页面中引入:
<link type="text/css" rel="styleSheet" href="http://at.alicdn.com/t/font_578430_rar6t76yrc545cdi.css" />
图标引用:
<i style="font-size:50px;" class='iconfont icon-changpianCD'></i>
如果是多色图标,就引入js文件,图标格式为:
<svg aria-hidden="true">
<use xlink:href="#icon-squirtle"></use>
</svg>
但是,重点来了,vue打包后图标错乱,不知道如何解决。
后来解决了,冲突是因为引入的其他内容冲突了
如果想下载到本地,参考:https://www.jianshu.com/p/a1f058abc6dd
作者:剽悍一小兔
链接:https://www.jianshu.com/p/1f9b507e8982
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。