阿里图标库iconfont前端使用

前端难免需要用到各种各样的图标，感觉阿里图标库里面的图标比较齐全，故写篇博客做个笔记。

• 阿里图标库网址

• 阿里图标库三种应用说明，这里面分别有：icon单个使用，unicode引用，symbol引用 这三种使用方式，其中symbol引用这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法，并且这种使用方式方便改图标的大小和颜色，这里面就详细介绍symbol引用这种使用方式。

symbol引用

• 将自己需要的图标库添加到购物车中，选好所有自己需要的图标，可以自行搜索，尽量一次选齐全。
• 
  -点击上图右上角红色1的购物车，将购物车中的所有图标添加到自己的项目中，如果没有项目需要新建，也可以根据项目分类，具体自己把握。
  
• 然后就可以进入到自己项目中查看刚才添加的图标，然后点击到下载到本地。
• 
• 下载到本地后解压打开，可以看到这样的一个文件列表，我们需要的是 iconfont.css和iconfont.js，其中的demo_index.html也有三种应用方式的说明。
  
  demo_index.html中的说明：按照图中的三步骤即可以使用图标了。
  
  这样就可以使用图标了，接下来说下，改图标大小和颜色。

改大小：

• 全局改所有图标的大小，在 .icon中用font-size属性就可以改所有图标的大小
  
• 单独改某个图标的大小，直接在svg中修改

    <svg class="icon" aria-hidden="true" style="font-size: 20px">
                <use xlink:href="#icon-caijishebeiguanli"></use>
              </svg>&nbsp;振弦传感器

改颜色

• 第一种在也是在标签中改

            <svg class="icon" aria-hidden="true" style="font-size: 20px;color:#999">
                <use xlink:href="#icon-caijishebeiguanli"></use>
              </svg>&nbsp;振弦传感器

-如果在标签中改没有生效，可以在iconfont.js中通过图标名称找到图标改对应的fill属性即可改颜色，可以改的比较眼花，一般无法生效是因为图标固有颜色，也就是有fill属性，如果没有可以直接在标签中改