在单个td单元格中显示两个glyphicons

我有一个需求，我需要在单个td单元格中显示两个glyphicons。但第二个是第一次压倒一切。在单个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; 
}

这里的第二种风格是覆盖第一种风格。但我希望这两种风格都能显示出来。

有没有办法做到这一点？请帮帮我。谢谢。

来源

2017-05-07 Shruthi Sathyanarayana

尝试使用'：的after'代替'：before'对于第二选择器。 –

@Koen谢谢你的回复。但它不工作:( –

您可以将多个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>

来源

2017-05-07 14:10:46 Stickers

嗨@Pangloss。这对我有用，但是我想为两个图标使用两种不同的颜色，我该怎么做？ –

@ShruthiSathyanarayana更新，只需使用两个伪元素。 – Stickers

在单个td单元格中显示两个glyphicons

回答

相关问题