​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）

1.打开iconfont，并登录账号

http://www.iconfont.cn/

 

 

2.挑选自己喜欢的图标，加入购物车

 

 

 

3.打开购物车 => 添加至项目 => 新建项目目录 => 确定

 

 

 

 

4.进入我的项目，点击Symbol，点击生成代码

 

 

 

5.将生成的代码引入index.html

 

 

 

6.在app.vue写上全局样式

 

.icon {

      width: 24px;

      height: 24px;

      vertical-align: -0.15em;

      fill: currentColor;

      overflow: hidden;

}

 

 

 

7.在需要引用彩色图标的地方，粘贴iconfont的代码

 

（1）在iconfont我的项目里点击复制代码

 

 

（2）在需要插入彩色图标的地方写代码：

<svg class="icon icon-back" aria-hidden="true">

        <use xlink:href="#icon-back"></use>

</svg>

 

 

（3）把在iconfont里复制到的代码，替换掉黄色画笔圈住的位置，前面加上 #

例：如果你复制到的代码是icon-qiubang那么就在页面里写：

 

<svg class="icon icon-back" aria-hidden="true">

        <use xlink:href="#icon-qiubang"></use>

</svg>

 

 

 

注：当你再次向项目里添加图标时，要更新代码，替换掉index.html里面引入的网址

 

 

当需要本地引入，而不是引入链接时：

1.进入iconfont => 我的项目 => 下载至本地

 

 

2.然后解压，一共有10个文件，把前缀不带 ‘demo’ 的6个文件放到项目的iconfont目录里

 

 

3. 在main.js中引入js  和  css文件

 

4.余下步骤和在线引入一样，使用class名或者svg连接就可以用字体图标了

 

 

 

不要觉得年纪轻轻就到了低谷，人生还有很大的下降空间。

阅读更多