项目引入图标的一些方式

传统的图片图标
- 图片
  
  最基本的一种方式，一个图标就是一张图片，缺点在于每个不同的图标都要进行一次请求才能获取到图片文件。
- 雪碧图
  
  将网页中的图标和背景图片都整合到一张大的图片中，利用CSS的背景定位来显示需要的部分，主要用到background-position属性。
  
  好处是减少加载图片的请求次数，但小图标之间的距离要确定好，避免相邻的图片露出来，不建议把雪碧图做得太复杂。
```
.icon {
    width: 100px;
    height: 100px;
  background: url(img/spirit.png);
    background-repeat: no-repeat;
    /* 把background-attachment设置为fixed，才能保证background-position属性在Firefox和Opera中正常工作 */
    background-attachment: fixed;
    /* background-position用于在雪碧图中定位到特定的图标，默认值为0% 0%，可以用px等CSS单位，也可以用百分比，仅设置一项时，另一项默认为50% */
    background-position: 100px 100px;
}
```

现在常用的字体图标

字体图标优点：
- 图标矢量化
- 本质上是字体，可以用CSS灵活控制图标的尺寸（font-size）、颜色（color）、阴影（text-shadow）等
- 各大平台如Iconfont（https://www.iconfont.cn/home/index）、Font Awesome（http://www.fontawesome.com.cn/）、IconMoon（https://icomoon.io/
  ）等图标丰富，可方便找到自己需要的图标，或把自己的图标上传

3种引入方式：

方式1：Unicode（最原始，兼容性最好IE6+，支持单色或用background实现的渐变色）

/* css，下面的路径为Iconfont生成的cdn路径，或下载至本地后的本地路径 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot');
  src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff') format('woff'),
  url('//at.alicdn.com/t/font_1503959_fx1tzdurig.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1503959_fx1tzdurig.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

<!-- html -->
<i class="iconfont">&#xe6c1;</i>

或者

/* css */
 @font-face {
   font-family: 'iconfont';
   src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot');
   src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot?#iefix') format('embedded-opentype'),
   url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff2') format('woff2'),
   url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff') format('woff'),
   url('//at.alicdn.com/t/font_1503959_fx1tzdurig.ttf') format('truetype'),
   url('//at.alicdn.com/t/font_1503959_fx1tzdurig.svg#iconfont') format('svg');
 }
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 .icon-icongouwuche:before {
   content: "\e6c1";
 }

<!-- html -->
<i class="iconfont icon-icongouwuche"></i>

方式2：Font class（推荐，Unicode方式的便利版，使用更直观，兼容性良好IE8+，支持单色或用background实现的渐变色）

为什么说是方式1的便利版？因为引入的这个CSS文件的内容，就是上面方式1中我们需要手动加入的CSS代码。

<!-- html，下面的路径为Iconfont生成的cdn路径，或下载至本地后的本地路径 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1503959_fx1tzdurig.css">

<i class="iconfont icon-icongouwuche"></i>

Unicode和Font class方式支持用background实现的渐变色：

<!-- html -->
<i class="iconfont icon-icongouwuche color1"></i>

/* css */
.color1 {
  /* 从左下角至右上角的线性渐变背景颜色 */
  background-image: -webkit-linear-gradient(left bottom, #fb2c61, #fac362);
}
.icon-icongouwuche {
  /* 限定背景的绘制区域为文字部分 */
  -webkit-background-clip: text;
  /* 文字填充颜色 */
  -webkit-text-fill-color: transparent;
  font-size: 100px !important;
}

方式3：Symbol（兼容性一般，IE9+及现代浏览器，支持多色）

引用的js控制svg写入body进行引用

/* css，下面的路径为Iconfont生成的cdn路径，或下载至本地后的本地路径 */
.iconfont {
  /* width/height/vertical-align根据情况自行调整 */
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
  font-size: inherit;
}

<!-- html，下面的路径为Iconfont生成的cdn路径，或下载至本地后的本地路径 -->
<script src="//at.alicdn.com/t/font_1503959_fx1tzdurig.js"></script>
<svg class="icon" aria-hidden="true">
   <use xlink:href="#icon-icongouwuche"></use>
</svg>

生成多色字体图标的SVG文件里，包含了1个或多个path标签，每个path对应图标的一部分，可以给path指定fill属性（填充色），表现为该颜色填充整个path。一旦制订了fill属性，即使在<svg/>标签设置了color，也不会改变path这部分的颜色。

如果想用<svg/>标签的color定义某部分的颜色，可以修改原SVG文件，把对应path的fill属性去掉或者设置fill="#000000"；或者修改引入的js文件，找到对应的path，去掉fill属性。

以Iconfont为例引入字体图标

以Iconfont（https://www.iconfont.cn/home/index）为例，先在【图标管理 -> 我的项目】中新建一个项目，然后把需要的图标【添加入库】，入库后即可在【购物车】中把图标添加至项目中；或者在【我的项目】中上传本地的图标文件。

把需要的图标添加到【我的项目】后，可以【下载至本地】将图标下载后使用，Font class方式引用iconfont.css，Symbol方式引用iconfont.js，Unicode方式引用其他文件，或者选择【暂无代码，点此生成】生成cdn链接代码后直接引用。

项目引入图标的一些方式

推荐阅读更多精彩内容