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

相关文章