img 法

  1. <img src="https://i.loli.net/2019/10/04/pWvXKYagMhoUryu.png" alt="图片" width="50px"/>

使用 img 引入图片，只用设置 width，高度会自动根据原来的宽高比设置，从而图片不会变形。

以前前端还得干切图的工作，现在前端不用干了，直接让设计师给图。

就是把设计师给的一张 psd 或者 png 用 PS 工具 切出一个个小 icon.png ，然后再进行网页制作还原设计图，期间还得测量 icon间距。

background 法

 // <div class="icon"></div>
.icon {
      display: inline-block;
      width: 110px;
      height: 200px;
      background: transparent url("https://i.loli.net/2019/10/04/pWvXKYagMhoUryu.png") no-repeat 0 0;
  }

优点：设置 div 宽高，不会使得图片变形。demo

background 合一法

CSS Sprites （css精灵，一词出于游戏）, 俗称雪碧图。是一种网页图片应用处理方式。将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

  • 工具

css sprites generator ，直接上传图片文件，它会把生成的 HTML 和 CSS给你，添加到页面中就可以了。

命令行工具，谷歌： CSS Sprites cli

  • CSS Sprites 原理
    实际上每个 div的背景图(background-image)都是合成的那张大图 。div 设置宽高（width属性、height 属性）形成一个视口用来展示背景图的一部分，调整背景图相对视口的位置(background-position)来展示目标 icon 。利用了div 的 width属性、height 属性、background 属性(background-image，background- repeat，background-position)。
  • 下面是一个真实的例子，直接用 css sprites generator 生成的。
<div class="sprites-alibaba"></div>
<div class="sprites-baidu"></div>
<div class="sprites-tencent"></div>
<div class="sprites-weibo"></div>

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.sprites-alibaba, .sprites-baidu, .sprites-tencent, .sprites-weibo { 
  display: inline-block; 
  background: url('https://i.loli.net/2019/10/04/zCfZWu2Fn1atrMh.png') no-repeat; 
  overflow: hidden; 
  text-indent: -9999px; 
  text-align: left; 
  width: 110px; 
  height: 110px;
}

.sprites-alibaba { background-position: -10px -0px;  }
.sprites-baidu { background-position: -130px -0px;  }
.sprites-tencent { background-position: -10px -120px; }
.sprites-weibo { background-position: -130px -120px;  }

上面代码中，div 容器的宽高充当展示图片的视口，视口大小固定，然后通过调整背景图相对视口的位置(background-position)来展示目标 icon 。

  • 最大的优点：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。
  • CSS Sprites 这种方法其实已经很古老了。

font 法

<br />打开 .css 文件发现，文件实质上就是使用标签伪类，本质上还是 unicode 引用方式。
- [SVG 法](http://js.jirengu.com/ziviv/1/edit)： symbol 引用 icon。**推荐 简单 方便**<br />svg 标签优点：支持彩色、改颜色、渐变、动画。自动居中对齐，不变形。<br />svg 引入 icon，就是写了一堆代码，记录了icon 的形状 和 颜色。```html
<style type="text/css">
    .icon {
       width: 2em; 
       height: 2em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shaokao"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-tianpin"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-sushi"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-yinliao"></use>
  </svg>
  <script src="//at.alicdn.com/t/font_1444520_uqdouk0equr.js"></script>
</body>

新手慎用：「CSS 就是干」法

自己用css 画 icon，几乎没人干。一种自虐的方式。

网站推荐： css icon