在单个 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: "e089e088";
  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>