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

时间:2023-02-09 00:52:42
作者:仅愚
链接: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>

最广泛的应用大概是这样的:
&amp;lt;img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL3BpYzEuemhpbWcuY29tL2MwMzcxZTJkZGE3MzEwYTc1MzRiNGQxMzg2NTQ1YmE4X2IuanBn.jpg" data-rawwidth="269" data-rawheight="181" class="content_image" width="269"&amp;gt;css content 如何自定义生成图标?
剩下的小问题容我吃完饭来说。

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

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