htmlcssfont-awesome

Is it possible to use two icons in css content one below other

I have a css class like below

.fa-unsorted:before, .fa-sort:before {
    content: '\e9c2';
    margin-top: -10px;
    color: #999999;
    font-family: 'icomoon';
}

It displays following

enter image description here

What I want is to also include \e9c1 as well but it should be displayed below \e9c2.

For context, I am using a library that has the css class mentioned to display sort icon. It uses fa-sort which has both up and down arrow in the same icon.

enter image description here

But I am using icomoon which does not have that kind of replacement. So I need to use two icons to display a sort. Following is what I want

enter image description here

I tried following for content, but as expected the arrows get displayed next to each other.

content: '\e9c2\e9c1';

Adding another class would be nice, but I don't have control on the JS to add new class.

Solution

  • You can't add more than one to the :before pseudo element.

    I'd recommend doing this if :after element is not already being used:

    .fa-unsorted:before, .fa-sort:before {
    content: '\e9c2';
    margin-top: -10px;
    color: #999999;
    font-family: 'icomoon';
  }
    
.fa-unsorted:after, .fa-sort:after{
    content: '\e9c1';
    margin-top: -15px;
    color: #999999;
    font-family: 'icomoon';
    right:0;
}