ICONFONT字体图标库使用

2018-03-18 本文已影响80人剽悍一小兔

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>