刚刚从看到课程里老师使用了阿里提供的矢量图标iconfont.cncss
我记录一下基本步骤:html
1.登陆iconfont.cn,搜索图标字体
2.选中想要的icon点击添加入库,再从右上方点购物车,把icon添加到项目阿里云
3.进入到本身收藏的图标库(或者从图标管理--个人项目下找)spa
4.我收藏库里,选择font class方式(这种方式,图标是放在阿里云的),点击图标上那个更新代码,就生成了一条连接,code
5.把这个连接引入到本身的html:cdn
<link rel="stylesheet" href="//at.alicdn.com/t/font_808642_71zswkrgl9l.css">htm
6.html里用一个标签方这个图标,选中本身要的图标--复制代码,而后就能够把代码拷到本身那个html标签的class中blog
<i class="icon-person-fill iconfont"></i> scss
这里iconfont是本身添加的,注意这个名字不能写别的,必定是iconfont,由于我以前觉得这个类型能够随便命名,结果发现图标没法显示的!!
而后在scss文件里就能够经过iconfont类来控制图标大小等样式
.iconfont{
font-size:30px; //注意icon大小就是用这个字体大小控制就能够了,不须要分别设置宽和高
color: white;
}
效果就如图:
这个东西能够说是很是方便了。其余引用方式能够参照官网上的使用帮助http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code