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字符添加到一个伪元素中。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想对其应用不同的风格，也可以同时使用:before和:after。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: