阿里iconfont图标的应用

如何引用阿里巴巴家的图标做自己的项目？

 

登录账号,选择图标建成项目就略过了.

 

步骤1：

搜索具体需要的图标,选择加入项目

 

步骤2：

有三种方式,我选用Symbol方式,获得在线链接.

 

步骤3：

将在线链接放入html文件.

因为Symbol方式获得的是js文件,因此使用script标签.默认的是没有http的,我们要自己添加.

<script type="text/javascript" 
 src="http://at.alicdn.com/t/font_xxx.js"></script>

 

步骤4：

插入样式语句,在开始时只引用一次就够了,通用

<style type="text/css">
   .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
  }

步骤5:

在需要的地方插入html语句

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

步骤6:

获得对应图标名称

选中对应图标,选择复制代码.

将这个复制的代码(其实就是个名字),替换掉步骤5的 icon-xxx.

步骤7:

打开浏览器验证效果.

---

 

现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。

<svg class="icon" aria-hidden="true" style="color:red;">
    <use xlink:href="#icon-PDF"></use>
</svg>

产生原因：当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在symbol的js文件中程序删除fill属性。

解决办法：

==1. 下载Js文件后，用Notepad++打开，然后用正则表达式查找：fill="#......" ，替换去除即可

==2. iconfont.cn上，全选项目中的文件，应用批量操作-->批量去色==