使用阿里巴巴矢量图标库

链接:

http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1

使用

1.添加

  • 选中图标放到购物车;
  • 最好选添加至项目(新建一个项目放上,按照项目来)
  • 在我的项目中,就可以看到他们了,最好选择Font Class--查看在线链接--生成链接--
  • 打开自己的vue项目,打开根目录下个index.html页面,引入
<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">

注意:链接上是加上了http的

2.项目中使用

在HTML等的标签中:

三个class前面两个是必须的icon iconfont ;
最后一个是图标的代码:

3.图标库添加图标

在图标库中新加如了图标之后,若想使用新加入的图标,需要回页面中重新生成链接,添加到index.html页面中.

4.调整引用的图片样式

直接在标签上建立style,设置样式,或者在css中使用图片的icon名设置样式,图片颜色大小等会根据设置的样式自行调整





原文地址:https://www.cnblogs.com/ziyue7575/p/eebe024af3715e89cbe5e8b849199fcb.html