在 CSS 中使用表情符号

Question

我有一个 HTML table，我想根据正在排序的列插入表情符号。我想过使用 CSS 来做到这一点，但不确定是否可行。我计划使用的表情符号是 ⬆ 和 ⬇，具体取决于列的排序顺序。这些列会根据排序自动将 class 应用于 asc 和 desc 中的第一个。我已经能够让图像正常工作，但希望改用表情符号。

示例 css 图片：

table.table thead th.sortable { background: url('../img/sort_both.png') no-repeat center right; }
table.table thead th.asc { background: url('../static/images/open-iconic/svg/sort-ascending.svg') no-repeat center right; }
table.table thead th.desc { background: url('../static/images/open-iconic/svg/sort-descending.svg') no-repeat center right; }

Answer 1

您可以使用 Pseudo Elements 和 content 个表情符号来实现此目的：

.asc::before {
  content: '⬇️';
}

.desc::before {
  content: '⬆️';
}

<span class="asc"></span>
<span class="desc"></span>

在 CSS 中使用表情符号

Use Emojis in CSS

html

css

html-table

emoji