我们下面使用的是阿里巴巴矢量图标库
点击上面链接，打开阿里巴巴矢量图标库，并登陆。
如下图所示，我们点击图标库下面的官方图标库，然后搜索活动相关的图标：
图1
我们选中的是，第二排的第一个，然后添加入库，如下图：
图2
这个时候我们发现右上角的购物车里面多了个图标，我们点击进去，然后选择添加至项目。
图3
这里我们可以添加到以前的项目，也可以新建一个项目。比如我新建了一个test。
然后我们可以看到有三种方式Unicode、Font class和Symbol，优缺点请跳转这里查看http://www.iconfont.cn/plus/help/detail?helptype=code&spm=a313x.7781069.1998910419.14.SlNDNh
本文用的是 Font class，我们点击中间这个，如下图：
图4
然后点击 “查看在线链接”。再点击 “暂无代码，点击生成”
图5
我们就生成了，这个图标的css，直接在项目中引用。然后加上对应class就能使用了。
图6
下面我们试用一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_clfvifvcecm1jor.css">
/*这个地方引入css的时候最好不要带上http:，因为可能出现这种问题，开发环境是http，你加http没问题，但是如果线上是https，你加http就会出错。*/
</head>
<body>
<i class="iconfont icon-huodong"></i>
<i class="iconfont icon-huodong" style="color:red"></i>
<i class="iconfont icon-huodong" style="color:blue"></i>
</body>
</html>
效果如下图：
图7
是不是很方便呢，如果后期需要增加图标的话，我们还是可以这样子做，直接把要增加的图标添加到刚刚创建的test项目里面就行了。
网友评论