是否有可能使用兩個圖標下面其他

Question

CSS內容我有一個CSS類像下面

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

這將顯示以下

我想是還包括\e9c1但它應顯示在\e9c2以下。

對於上下文，我正在使用一個提到的css類來顯示排序圖標的庫。它使用fa-sort，在同一個圖標中同時具有向上和向下箭頭。

但是我使用不具備那種更換icomoon。所以我需要使用兩個圖標來顯示排序。下面是我想

我嘗試以下內容，但如預期的箭頭獲得並排顯示等。

content: '\e9c2\e9c1'; 

添加另一個類會很好，但我沒有控制JS添加新類。

Answer 1

您不能在before僞元素中添加多個元素。

我建議這樣做，如果：尚未被使用的元素後：

.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

你可以簡單地使用這兩個僞爲此，:before & :after，那麼他們的風格，如你所願，用箭頭。

Answer 3

只是用另一種僞元素，即：::after：

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

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

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

附：僞元素不同於僞類應該有兩個雙冒號，即：:: 之後不是：之後。 #justsayin

Answer 4

你可以使用icomoon嵌入圖標(ea7f)和使用transform旋轉span元素，像這樣：

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