Используйте Emojis в CSS - PullRequest
Новая
       15

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

0 голосов
/ 13 февраля 2020

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

3 голосов
/ 13 февраля 2020

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

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

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