icon的所有方案

icon 的各种做法

img 法
background 法
background 合一法
font 法
SVG 法
CSS 就是干法

img 法

搞一张图片
使用<img src="图片路径"/>来使用图片
通过其它 css 属性来控制图片的大小，位置等

优点：可以利用图片默认自动缩放的特性，通过仅设置宽度或者高度来改变图片的大小

background 法

搞一张图片
利用 css 属性background: url(./image.png)
通过其它 css 属性来控制图片的大小，位置等

background 合一法

将几张图片拼成一张图，可以用网上的 css sprites generator 工具
利用 css 属性width，height, overflow, background-position来显示某一张图片

font 法

使用 icon-font，字体即图标，图标即字体。常用网站：http://iconfont.cn

注意：一般来说，字体图标的 Entity Number 一般都以&#xe6开头，因为这一段范围通常不表示任何字符

inconfont 的 HTML 形式（对应 iconfont.cn 里的 Unicode 功能）

用法：

在样式里引入@font-face

@font-face {
  font-family: 'iconfont'; /* project id 1958405 */
  src: url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.eot');
  src: url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.woff') format('woff'), url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.ttf')
      format('truetype'),
    url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.svg#iconfont') format('svg');
}

使用字体对应的 Entity Number（unicode）并指定 font-family

<div style="font-family: iconfont;">
  &#xe600;
</div>

inconfont 的 CSS 形式（对应 iconfont.cn 里的 Font class 功能）

在样式里引入@font-face，并使用伪类指定对应 iconfont 的 Entity Number

@font-face {
  font-family: 'iconfont'; /* project id 1958405 */
  src: url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.eot');
  src: url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.woff') format('woff'), url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.ttf')
      format('truetype'),
    url('//at.alicdn.com/t/font_1958405_gp6ql65yxke.svg#iconfont') format('svg');
}
.xxx:before {
  content: '\e600';
}

指定 font-family 和伪类

<div class="xxx" style="font-family: iconfont;"></div>

SVG-symbol 法

这种方式是最推荐的做法。与以上方式相比有如下特点：

支持多色图标，不再受单色限制
通过一些技巧，支持像字体那样，通过 font-size，color 来调样式
兼容性较差，支持 ie9+即现代浏览器
浏览器渲染 svg 的性能一般，还不如 png

使用步骤：

从 iconfont.cn 上拷贝项目下生成的 symbol 代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

加入通用 css 代码（引入一次就行）

<style type="text/css">
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

挑选相应的图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

「CSS 就是干」法

纯css技巧来实现icon。

推荐一个网站，这个网站是一个设计师写的，全是用css实现的icon。

https://cssicon.space