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>

最广泛的应用大概是这样的:

剩下的小问题容我吃完饭来说。

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

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
posted @ 2016-11-03 15:43  zzwlong  阅读(...)  评论(... 编辑 收藏