我们知道 css 中有 content 这一属性,其官方概述是这样的:
CSS 的 content
CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content
属性插入的内容都是匿名的可替换元素。
简而言之就是定义了伪元素的内容,下面附上mdn官方文档:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/content
当然content可以实现文字,标点,网络图片资源的呈现。但官方文档中还有这么一条:
很好理解红色方框中 content: "\1f4a1"; 实现了展示图标的功能。这种编码实际上是unicode.
一般我们使用和了解更多的是各国文字的unicode编码,但实际上unicode可以实现很多的emoji和图标icon。
下面我推荐两个网站,分别可以找到简易的icon和众多emoji的unicode编码:
https://materialui.co/unicode-characters/
https://www.emojiall.com/zh-hans/emoji
html中只需要建立一个空的div标签:
css中实现伪元素,再添加content属性:
.empty::before {
content: "\02a39";
}
大功告成!这样单独的标签就是一个icon图标了
这样使用icon图标就不需要从网络下载svg或者ico文件了,节省了前端的代码包容量,也节约了加载时间。对于像雨伞,小人之类的简单的黑白icon只需要使用unicode就足矣。