-
传统的图片图标
-
图片
最基本的一种方式，一个图标就是一张图片，缺点在于每个不同的图标都要进行一次请求才能获取到图片文件。
-
雪碧图
将网页中的图标和背景图片都整合到一张大的图片中，利用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"></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链接代码后直接引用。
