在单个 td 单元格中显示两个字形图标答案

【问题标题】：Displaying two glyphicons in a single td cell在单个 td 单元格中显示两个字形图标
【发布时间】：2017-05-09 21:43:47
【问题描述】：

我有一个要求，我需要在一个 td 单元格中显示两个字形图标。但是第二个覆盖了第一次。

在下面的代码中：

我正在发送两种样式，其中包含代码中的 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;
}

这里第二种样式覆盖第一种样式。但我希望两种样式都能显示出来。

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

【问题讨论】：

尝试使用:after 而不是:before 作为第二个选择器。
@Koen 谢谢你的回复。但它不起作用:(

标签： html css glyphicons

【解决方案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>

【讨论】：