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

引入

我们知道 css 中有 content 这一属性,其官方概述是这样的:

CSS 的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。

简而言之就是定义了伪元素的内容,下面附上mdn官方文档:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

当然content可以实现文字,标点,网络图片资源的呈现。但官方文档中还有这么一条:

前端通过unicode实现通过css多种icon图标_第1张图片

很好理解红色方框中 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标签:

css中实现伪元素,再添加content属性:

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

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

优点

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

你可能感兴趣的:(前端,css)