项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)

思路：

1、找到你需要的阿里巴巴字体图标，添加到 公司字体图标阿里巴巴库，----> 刷新 该icon所在的 阿里巴巴css文件在线链接

2、在项目中 新建一个字体图标css文件 inconfont.scss （项目用的是Sass编译），引入 阿里巴巴css文件在线链接，

3、全局样式 引入刚新建的字体图标css文件

4、copy到该icon代码，在使用页面 使用该代码作为i标签的class名 

<i class="iconfont icon-dahuoche" style="font-size:30px;"></i>

详细说明：

用公司给的阿里巴巴账号 登录 阿里巴巴 https://www.iconfont.cn，

搜索查找到需要的字体图标： 如： 货车图标 

点击更新代码：获得 阿里巴巴在线css文件，copy该文件链接 到项目中：

  到项目中：找到全局样式管理文件： styles / index.scss ,在同级位置 新建一个icon样式文件inconfont.scss,如下： （将先前在阿里巴巴获得的css文件地址拷贝到此）

在全局样式文件index.scss里面引入 该icon文件 iconfont.scss: 

在入口文件main.js里面引入全局样式文件：

import ‘@、styles/index.scss’  // global css

回到阿里巴巴 项目中找到你要的图标下面的icon代码：copy 到你需要使用的页面：

如：

icon-huabanfuben

效果如下:

===================================

彩色图标 

1、拷贝svg项目下生产的symbol代码： + icon代码

在项目 index.html里面引入 该 阿里巴巴symbol在线js文件

<!--svg彩色字体图标 在线阿里巴巴symbol-->

<script src="//at.alicdn.com/t/font_1020172_heufpqu3jhn.js"></script>

2、加入 通用css代码 （引入一次即可）

// 彩色 svg 通用css样式
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill:currentColor;
  overflow: hidden;
}

// 彩色 svg 通用css样式
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill:currentColor;
  overflow: hidden;
}

在使用的页面 使用 icon代码（注意：前面加 #）

效果如下：