前端小问题：如何在 1 和 2 中间打两个空格？
如果直接 <body>1 2</body>，显示的是 1 2（只留一个空格）
正确做法是使用转义： （牛逼空格）或  
这种叫 html entity （字符实体）,共同规律是 &entityName; 或 &#entityNumber;

icon 制作方法

  • img 法（切图）
  • background 法
  • sprits 法
  • iconfont（字体法）
  • SVG（推荐）
  • 手工 CSS 法（慎用）

PSD 剪切图标的方法

右键选中图层
右键复制图层，选择 new
图像，裁剪
改变画布大小，100 x 100

选中想要的区域，crop
选择魔棒工具，点击像素，右键反选，delete
右键，取消选择
图像裁剪，改变画布大小

background法

background: transparent url('./qq.png') no-repeat 0 0;

精灵图

百度：css sprits generator，直接使用工具即可。

iconfont

iconfont = icon font，就是有个设计师，故意把字体的 ABCDEF 画成各种图标，这样我们要使用图标，只要声明该字体并打上 A,B,C,D 就能显示图标，基于 font 实现了 icon
iconfont 字体图标使用 html entity 字符编码表示
比如   表示空格，
比如 &#20320; &#x4F60; 分别以 10 进制， 16 进制 Unicode 编码表示 “你”
我们约定形如 &#xe6??; 的编码表示自定义图标字体（之所以 e6 是因为该字段开头的特殊编码无默认字符）

例子，使用 iconfont.cn 生成一个读书图标的字体

* {
  font-family: 'iconfont';
  font-size: 100px;
}

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

然后在 html 里面 &#xe65a;字符就表示读书图标
@font-face 语句定义了一个名为 iconfont 的字体，* 选择器下使用了该字体，那么 html 里面的所有 &#xe65a; 就转为自定义图标

代码预览

这种做法就是定义特殊字体与特殊字符，用特殊字符表示图标

以上只是 iconfont 的 html 形式，实际上还有 css 写法

css 写法
原理不变，只是借助伪类，将字符实体从 html 转移到 css 中
在 html 的做法的基础上，声明图标类，把字符写入 :before 的 content 中
之后只要在 css 指定图标类，并在 html 中直接使用该类即可看到图标

.iconfont {
  font-family: 'iconfont';
  font-size: 100px;
}

.iconfont.book::before {
  content: '\e65a';
}

然后 html 里面这样用 <span class="iconfont book"></span>

代码预览

SVG 法

这是未来的主流，也是使用 icon 时优先级最高的选择

它使用 svg 语法描述图标，矢量图，支持彩色，支持 css 更改样式

做法： 进入 iconfont.cn，借助里面的工具完成即可
推荐参考：iconfont 的使用 中 symbol 引用的说明

第一步：进入 iconfont.cn，挑选图标后点击生成代码

第二步：拷贝，并引用生成的 js 与 css 代码

第三步：拷贝给定的 svg 标签，更改类名即可

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//at.alicdn.com/t/font_1046506_tv5oxeytrk.js"></script>
  <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
  </style>
</head>

<body>
  <svg class="icon" aria-hidden="true" style="width: 100px; height: 100px; fill: red; stroke-width: 4px; stroke: black;">
    <use xlink:href="#icon-book"></use>
</svg>
</body>

</html>

代码预览

附加说明：
改大小 : 在 SVG 类上添加 style="width: 100px; height: 100px" (必须两个都改，因为只改一个没有效果)
改颜色：style="fill: 颜色"
改描边：style="stroke: 颜色; stroke-width: 粗细" (必须两个都改，因为描边默认无宽)

手工 CSS 法

直接 css 开干，见 cssicon.space