在單個td單元格中顯示兩個glyphicons

Question

我有一個需求，我需要在單個td單元格中顯示兩個glyphicons。但第二個是第一次壓倒一切。

在下面的代碼：

我派兩種風格，其包含的代碼gyphicons：

table.setHeaderStyles("weekdays", i - daysBefore, " dayinfo glyphicon glyphicon-info-sign" + glyphicon-exclamation-sign); 

這裏是如何顯示爲HTML

<td class="v-table-cell-content v-table-cell-content- dayinfo glyphicon glyphicon-exclamation-sign" style="width: 26px;"><div class="v-table-cell-wrapper" style="text-align: center; width: 26px;">Fri</div></td> 

這裏是CSS適用款式：

.glyphicon-exclamation-sign:before { 
    font-family: "Glyphicons Halflings" !important; 
    font-size: 10px !important; 
    color: #991F3D !important; 
    margin-bottom: -7px !important; 
    float: right; 
} 

.glyphicon-info-sign:before { 
    font-family: "Glyphicons Halflings" !important; 
    font-size: 9px !important; 
    color: #1F6689 !important; 
    margin-bottom: -7px !important; 
    float: left; 
} 

這裏的第二種風格是覆蓋第一種風格。 但我希望這兩種風格都能顯示出來。

有沒有辦法做到這一點？請幫幫我。謝謝。

Answer 1

您可以將多個unicode字符添加到一個僞元素中。

td:before { 
 
    font-family: 'Glyphicons Halflings'; 
 
    font-size: 20px; 
 
    content: "\e089\e088"; 
 
    letter-spacing: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<table> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table>

您還可以，如果你想不同的樣式應用到他們同時使用:before和:after。

td:before, 
 
td:after { 
 
    font-family: 'Glyphicons Halflings'; 
 
    font-size: 20px; 
 
    margin: 0 2px; 
 
} 
 

 
td:before { 
 
    content: "\e089"; 
 
    color: green; 
 
} 
 

 
td:after { 
 
    content: "\e088"; 
 
    color: blue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<table> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table>