Search code examples
htmlcsshtml-tableemoji

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

  • 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>