css content 如何自定义生成图标？
一下是我看到的一段css的源代码，其实就是在分享到为微博的时候的图标
a#end_cc, a#twitter, a#weibo {
margin: 0 5px;
border-bottom: none; }
a#end_cc:before, a#twitter:before, a#weibo:before {
font-size: 24px;
font-family: "fontello"; }
#end_cc:before {
content: "e7a5"; }
#twitter:before {
content: "f309"; }
#weibo:before {
content: "f33f"; }
其中不太明白的是f309
这些是如何定义的
题主说的问题可以分为几个小问题：
- :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>
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>