MYPYNOTE

导航

 

刚刚从看到课程里老师使用了阿里提供的矢量图标iconfont.cn

我记录一下基本步骤:

1.登录iconfont.cn,搜索图标

2.选中想要的icon点击添加入库,再从右上方点购物车,把icon添加到项目

3.进入到自己收藏的图标库(或者从图标管理--我的项目下找)

4.我收藏库里,选择font class方式(这种方式,图标是放在阿里云的),点击图标上那个更新代码,就生成了一条链接,

5.把这个链接引入到自己的html:

<link rel="stylesheet" href="//at.alicdn.com/t/font_808642_71zswkrgl9l.css">

6.html里用一个标签方这个图标,选中自己要的图标--复制代码,然后就可以把代码拷到自己那个html标签的class中

<i class="icon-person-fill iconfont"></i> 

这里iconfont是自己添加的,注意这个名字不能写别的,一定是iconfont,因为我之前以为这个类型可以随便命名,结果发现图标无法显示的!!

然后在scss文件里就可以通过iconfont类来控制图标大小等样式

 

.iconfont{
font-size:30px; //注意icon大小就是用这个字体大小控制就可以了,不需要分别设置宽和高
color: white;
}

效果就如图:

这个东西可以说是非常方便了。其他引用方式可以参照官网上的使用帮助http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

posted on 2018-08-25 15:49  MYPYNOTE  阅读(425)  评论(0)    收藏  举报