项目引入图标的一些方式

1. 传统的图片图标

   • 图片

     最基本的一种方式，一个图标就是一张图片，缺点在于每个不同的图标都要进行一次请求才能获取到图片文件。

   • 雪碧图

     将网页中的图标和背景图片都整合到一张大的图片中，利用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;
     }
     

2. 现在常用的字体图标

   字体图标优点：

   • 图标矢量化

   • 本质上是字体，可以用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;
  }
  

  
  
  

  或者

  /* 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";
   }
  

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

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

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

  /* 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;
}

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

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

3. 以Iconfont为例引入字体图标

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

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