Используйте Emojis в CSS

У меня есть таблица HTML, и я хотел бы вставить смайлик в зависимости от того, по какому столбцу сортируется. Я думал об использовании CSS для этого, но не уверен, если это возможно. Смайлики, которые я планирую использовать, это ⬆ и ⬇, в зависимости от порядка сортировки столбца. Столбцы автоматически применяют класс th к 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; }

Всего 1 ответ


Вы можете использовать псевдоэлементы с content смайликов для достижения этой цели:

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

.desc::before {
  content: '⬆️'
}
<span class="asc"></span>
<span class="desc"></span>


Есть идеи?

10000