在单个 td 单元格中显示两个字形

Question

我有一个要求，我需要在一个 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;
}

此处第二种样式覆盖第一种样式。但我希望两种样式都显示出来。

有什么办法吗？请帮我。谢谢。

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>

在单个 td 单元格中显示两个字形

Displaying two glyphicons in a single td cell

html

css

glyphicons