Est-il possible d'utiliser deux icônes dans le contenu css celui ci-dessous d'autres

Question

J'ai une classe css comme ci-dessous

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

Il affiche suivant

Ce que je veux est d'inclure également \e9c1 aussi bien, mais il devrait être affiché ci-dessous \e9c2.

Pour le contexte, j'utilise une bibliothèque qui a la classe css mentionnée pour afficher l'icône de tri. Il utilise fa-sort qui a les deux flèches haut et bas dans la même icône.

Mais j'utilise icomoon qui ne dispose pas de ce genre de remplacement. J'ai donc besoin d'utiliser deux icônes pour afficher un tri. Voici ce que je veux

J'ai essayé suivante pour le contenu, mais comme prévu les flèches ne sera pas affiché à côté de l'autre.

content: '\e9c2\e9c1'; 

Ajout d'une autre classe serait bien, mais je n'ai pas le contrôle sur la JS pour ajouter une nouvelle classe.

Answer 1

Vous ne pouvez pas en ajouter plus d'un à l'élément: before pseudo.

Je vous conseille de faire cela si: après élément n'est pas déjà utilisé:

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

Answer 2

vous pouvez simplement utiliser les deux pseudo pour cela, :before & :after, les puis le style que vous le souhaitez, avec des flèches.

Answer 3

utiliser juste un autre élément pseudo, i.e. .: ::after:

.my-icon::after, 
.my-icon::before { 
    color: #999; 
} 

my-icon::after { 
    content: '\e9c1'; 
} 

my-icon::before { 
    content: '\e9c2'; 
    margin-top: -10px; 
} 

P.S. les pseudo-éléments, contrairement aux pseudo-classes, doivent avoir deux doubles-deux-points, c'est-à-dire: après et non: après. #justsayin

Answer 4

Vous pouvez utiliser icomoon Embed icône (ea7f) et utiliser transform pour faire tourner l'élément span, comme ceci:

.icon-embed--vertical { 
 
    display: inline-block; 
 
    transform: rotate(90deg); 
 
} 
 

 
.icon-embed::before { 
 
    content: "◀▶"; /* Actual icon here: content: "\ea7f";*/ 
 
    font-size: .6em; /* styling */ 
 
}

<button>Date Created <span class="icon-embed icon-embed--vertical"></span></button>