前端通过unicode实现通过css多种icon图标

引入

我们知道 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编码，但实际上unicode可以实现很多的emoji和图标icon。

下面我推荐两个网站，分别可以找到简易的icon和众多emoji的unicode编码：

​​​​​​https://materialui.co/unicode-characters/

https://www.emojiall.com/zh-hans/emoji
 

在前端的使用

html中只需要建立一个空的div标签：

<div class="empty"></div> 

css中实现伪元素，再添加content属性：

.empty::before {
  content: "\02a39";
}

大功告成！这样单独的标签就是一个icon图标了

优点

这样使用icon图标就不需要从网络下载svg或者ico文件了，节省了前端的代码包容量，也节约了加载时间。对于像雨伞，小人之类的简单的黑白icon只需要使用unicode就足矣。