论坛 › 马黑黑教程专版 › CSS：伪元素content属性使用Emoji图标

马黑黑 发表于 2023-7-3 08:44

CSS：伪元素content属性使用Emoji图标

按照 W3S 官网的介绍，HTML可以使用 Emoji 图标，代码中可以使用十进制或十六进制表示 Emoji 图标。

其实，Emoji 图标可以直接复制使用。比如这个：

⚽

我们粘贴到论坛发帖编辑框内，它显示的就是一个足球。

不过，论坛在保存用户数据是，这个足球被自动转换为十进制编码符号，&#9917，&# 是前缀，99177 是 ⚽的十进制编码。

这意味着，HTML代码中，可以使用十进制编码发 Emoji 图标：

<p>&#9917</p>

也可以使用十六进制：

<p>&#26BD</p>

上面，26BD 是 ⚽的十六进制编码字符，&# 是前缀。

下面是重点：在 CSS 伪元素 content 属性中使用 Emoji 图标——

要点：① 使用十六进制编码；② 使用前缀 \

例如：

<style>
.emoji::before, .emoji::after {
    content: '\26BD';
}
</style>

<p class="emoji">伪元素显示 Emoji 图标</p>


在伪元素 content 中使用 Emoji 图标，以上方法不是唯一的实现途径，为避免知识点难度飙升，本次先不谈另外的方法。

马黑黑 发表于 2023-7-3 08:45

<p>一楼伪元素使用 Emoji 图标代码演示：<br><br></p>
<style>
.emoji::before, .emoji::after {
    content: '\26BD';
}
</style>

<p class="emoji">伪元素显示 Emoji 图标</p>

南无月 发表于 2023-7-3 09:31

马黑黑 发表于 2023-7-3 08:45
一楼伪元素使用 Emoji 图标代码演示：

.emoji::before, .emoji::after {


看明白了，虽然16制和十进制长得都差不多。。
现在的问题是：编码从哪里来？
我需要你给的这个鲸鱼content: '\1F40B';的十进制编码……

{:4_187:}{:4_191:}

马黑黑 发表于 2023-7-3 11:19

本帖最后由 马黑黑 于 2023-7-3 11:20 编辑

南无月 发表于 2023-7-3 09:31
看明白了，虽然16制和十进制长得都差不多。。
现在的问题是：编码从哪里来？
我需要你给的这个鲸鱼cont ...
以中文版官网 https://www.emojiall.com/zh-hans 为例，说明如下：

操作步骤：

一、在搜索框输入你要找的关键字，鲸鱼，回车或点查找图标按钮；

二、在搜索结果里，可能存在很多个图标，下拉看看，找到你中意的。每一个搜索结果，图标在上，下面是复制按钮，点击图标，会进入该图标的详情页面；

三、在详情页面，如果弹出广告，将广告关闭。然后下拉，找到基本信息，这里，信息列表里两样东东就是我们要找的，一个是“字符编码”，它就是十六进制编码，它上面的 U+ 是前缀，真实的编码在 U+ 的后面；一个是十进制，它前面的 ALT+ 是前缀，其后的内容是编码。

注意：在web页，HTML代码，十进制和十六进制的前面是 &# ；在 CSS 代码，十六进制的前缀是 \

红影 发表于 2023-7-3 12:00

这小足球还真漂亮呢{:4_204:}
不同进制及伪元素下的用法都不一样呢，这个用起来还挺麻烦的。

马黑黑 发表于 2023-7-3 12:04

红影 发表于 2023-7-3 12:00
这小足球还真漂亮呢
不同进制及伪元素下的用法都不一样呢，这个用起来还挺麻烦的。

伪元素下使用，用十六进制的，记住这个就好。

HTML里，不用管那么多，直接复制图标粘贴过来就行，论坛程序编码不对的会自动帮转为十进制。

醉美水芙蓉 发表于 2023-7-3 12:05

马黑黑 发表于 2023-7-3 12:06

醉美水芙蓉 发表于 2023-7-3 12:05
我说怎么换个按钮就不显示了？原来是这样啊！

里面有点小窍门哦

樵歌 发表于 2023-7-3 16:03

俺认出来咧，一个小足球{:4_173:}

马黑黑 发表于 2023-7-3 17:29

樵歌 发表于 2023-7-3 16:03
俺认出来咧，一个小足球

挺漂亮的

南无月 发表于 2023-7-3 18:07

马黑黑 发表于 2023-7-3 11:19
以中文版官网 https://www.emojiall.com/zh-hans 为例，说明如下：

操作步骤：


官网收了，方法找到了，按照贴子里说的顺利找到了。。。又学到新的一课……收获满满{:4_199:}{:4_190:}

马黑黑 发表于 2023-7-3 19:47

南无月 发表于 2023-7-3 18:07
官网收了，方法找到了，按照贴子里说的顺利找到了。。。又学到新的一课……收获满满

W3C系列网站也会有 Emoji 专题，它们提供的信息可能更方便查阅

红影 发表于 2023-7-3 20:22

马黑黑 发表于 2023-7-3 12:04
伪元素下使用，用十六进制的，记住这个就好。

HTML里，不用管那么多，直接复制图标粘贴过来就行，论坛 ...

嗯嗯，这种方法记忆倒是很方便。

马黑黑 发表于 2023-7-3 21:06

红影 发表于 2023-7-3 20:22
嗯嗯，这种方法记忆倒是很方便。

懒人的福音{:4_170:}

红影 发表于 2023-7-3 21:35

马黑黑 发表于 2023-7-3 21:06
懒人的福音

聪明的法子。{:4_173:}

马黑黑 发表于 2023-7-3 21:36

红影 发表于 2023-7-3 21:35
聪明的法子。

{:4_181:}

樵歌 发表于 2023-7-4 10:11

马黑黑 发表于 2023-7-3 17:29
挺漂亮的

反正懂不起，能简单用一点两点我可开心了{:4_189:}

梦缘 发表于 2023-7-4 10:55

问好老师，欣赏精彩分享，点赞！{:4_187:}

马黑黑 发表于 2023-7-4 12:24

梦缘 发表于 2023-7-4 10:55
问好老师，欣赏精彩分享，点赞！

{:4_190:}

马黑黑 发表于 2023-7-4 12:25

樵歌 发表于 2023-7-4 10:11
反正懂不起，能简单用一点两点我可开心了

按理，理解一两个标签不是个事

查看完整版本: CSS：伪元素content属性使用Emoji图标