css content 如何自定义生成图标？

作者：仅愚
链接：https://www.zhihu.com/question/22022905/answer/20585820
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

1. :before（或:after）是什么玩意？

答：伪元素（注意，不是伪类）。
它虽然被收录到css3标准中，但其实主流浏览器都已经支持伪元素了，这其中包括了IE8+。
伪元素实际上在html dom中不存在，但会被浏览器渲染成html的一个节点，比如题主提到的#twitter:before，就是在#twitter这个标签里的开始处插入了一个子元素（节点），同理，:after是在该元素的最后插入子元素，它与以下html具有相同的效果：

<div id="twitter">
    <span></span><!-- 或者一个div -->
     .....
</div>

伪元素与一个CSS属性息息相关，就是content，顾名思义，这是定义伪元素内容的，如：

#twitter:before{
       display:inline;
       content:'我是个伪元素';
       }

相当于：

<div id="twitter">
     <span>我是个伪元素</span>
      .....
 </div>

最广泛的应用大概是这样的：
<img src="https://pic1.zhimg.com/c0371e2dda7310a7534b4d1386545ba8_b.jpg" data-rawwidth="269" data-rawheight="181" class="content_image" width="269">
剩下的小问题容我吃完饭来说。

==============

2.‘\f33f’是如何被显示为图标的？

答：
这里用到了WebFont，也就是一种“字体”，这种字体包含了矢量图标，诸如 ‘\f33f’就是对应矢量图标的编码。
你这段代码并不全，css里应该还包含这段：

@font-face {
	font-family: 'XXX'; /* 给你的自定义WebFont命名 */
	src:url('xxx.eot');
	src:url('xxx.eot?#iefix') format('embedded-opentype'),
		url('xxx.woff') format('woff'),
		url('xxxn.ttf') format('truetype'),
		url('xxx.svg#micon') format('svg');
	font-weight: normal;
	font-style: normal;
...
}

它的好处是不必再使用css spirit切图了，而且作为矢量图可以以任意你想要的尺寸显示，另外，这种方法兼容性很好（ie6 7 可以显示，前提是你为不同的浏览器准备了不同的字体文件格式，如eot、woff、ttf、svg）。
如何制作它？请参见@朱勃 的答案，已经很详细了，不再赘述。

3.直接将icon的unicode写在html上不就成了，为什么还得费劲加伪元素:before呢？

答：
从这段代码看，你知道'\f309'、'\f33f'分别代表的是哪些图标么？
别说你看不出来，即使WebFont的作者也看不出来啊，这些unicode编码显然不如html的class或者id语义化。如果在一个大型网站上多处复用这些font icon，那是相当要命的（每用一次就去查一查？），因此，就出现了一种题主展示的解决方案：

HTML:

<i class="icon icon_open"></i>

CSS:

@font-face{
	font-family: 'MyFont'; /* 给你的自定义WebFont命名 */
	src:url('xxx.eot');
	src:url('xxx.eot?#iefix') format('embedded-opentype'),
		url('xxx.woff') format('woff'),
		url('xxxn.ttf') format('truetype'),
		url('xxx.svg#micon') format('svg');
	font-weight: normal;
	font-style: normal;
        ...
}
.icon{
        font-family: 'MyFont';
        speak:none; /* 无障碍阅读所需要的，告诉屏幕阅读器不要读这个字符 */
        font-size:14px;
        font-variant:normal;
        font-weight:normal;
        text-transform: none;
        ...
}
.icon_open:before{
        content:"\f001"; /* 相应图标的编码 */
        ...
}

然后你只要在任何你想使用该图标的地方插入HTML即可：

<nav>
      <a href="open.html"><i class="icon icon_open"></i>Open</a>
</nav>

转自：https://www.zhihu.com/question/22022905