如何使用免费的文字图标

作为个前端新手小白，我刚get到一个新鲜的玩意儿，迫不及待的想和你们分享！那么我要分享的是什么呢？没错就是如何让你的icon变得跟字体一样可以编辑样式，在没有get到此技能之前，我和大家一样都是抠图仔，看见大神那些牛逼的图标就只能献上膝盖！那么今天就让小白我来教你如何……装逼！

图标下载使用

首先你要注册一个新浪微博，当然如果你是阿里爸爸内部员工，就当我没说。之所以要注册一个新浪微博，是因为阿里爸爸规定只有三种登陆方式，而国内最常用的就是微博登陆，注册好后你 随便找一个浏览器打开阿里矢量图标库，用 微博登陆后如下图所示：

里面有很多漂亮小姐姐做的很多常用的图标，大家不要慌，当然这些都是免费使用的，在这里我先向马云老师说声感谢。然后在里面找到你需要的图标，因为里面有海量的 图标，你可以选择搜索名称，这样更快，看到自己需要的图标就点击图表上面的购物车标志，然后图标就会在你的购物车里，（再说一遍免费使用！！！！）你可以选择很多，选择好后全部放入购物车进行下载，如图所示：

你可以看见有下载至本地，不要选择下载素材，那是UI小姐姐用的图片格式，我们需要的是代码格式!下载好后，因为是压缩文件，所以我们首先要解压，然后将其放入到CSS同级目录的站点里面，在放进去之前，建议你改一下文件夹的名称，因为考虑到你可能不止会下载一次，这样就不会乱，如下图所示：
接下来就是引入到HTML里面，在html head里面加一个链接,并将icon里面的iconfont.css文件所在的目录地址填入就可以了。如图所示：.这里建议在使用图标的地方外面加一个标签，因为i标签是内联元素，设置一个class名，名字不能自己取，在阿里巴巴图标库我的项目里面的，点击font class，复制下面的名称即可，Unicode码使用Unicode吗添加的方式用的。这里只介绍class名添加方式，其他方式在下载的文档里面有，还有svg添加方式，但不建议用，老师说会影响性能。下面我们来看下效果。如图所示： 里面的 图标可以像字体一样设置大小可颜色，所有字体拥有的属性他都可以有！

如何在线共用图标

在公司里，一般都是几个人共同开发，所以这里介绍一下如何公用一逃图标，首先进入阿里图标库，创建个人项目，在里面添加图标，然后在创建文件夹图标下面的项目成员搜索你的团队好友，将他们加入就可以了进行共享了，入下图所示：`
，以上就是我所知道的所有，欢迎大家指教！