CODEWITHSUNDEEP
htmlcsshtml-tableemoji
cdm
cdm

Reputation: 799

Use Emojis in CSS

I have an HTML table, and I'd like to insert an emoji depending on what column is being sorted. I thought of using CSS to do this, but not sure if that's possible. The emojis I plan on using are ⬆ and ⬇, depending on the sorting order of the column. The columns automatically apply a class to th of asc and desc based on the sort. I've been able to get images to work, but looking to use emojis instead.

Sample css with images:

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; }

Upvotes: 2

Views: 5254

Answers (1)

Hao Wu
Hao Wu

Reputation: 20689

You can use Pseudo Elements with content of emojis to achieve this:

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

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

Upvotes: 4

Related Questions