如何为使用Boostratp 3.3.x样式的链接中嵌入的glyficon图标应用自定义颜色？

问题描述

我需要使用boostrap 3.x Glyficons图标作为可排序表列的按钮/链接（箭头用于升序和降序）。我开始为内部标签创建自己的CSS类，该内部标签已将glyficon CSS类应用于该内部标签，但这不适用于图标继承颜色。

我需要覆盖服装（和/或父标签属性），以修改图标的颜色（黑色或灰色）和尺寸。目前，带有蓝色的glyficons箭头显示为蓝色，这似乎是由标签所继承的。

在这种情况下，如何清洁地将我自己的颜色/大小应用于字形图标？

HTML代码（仅相关部分）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
  <table class="table table-striped" id="contacts">
      <thead>
          <tr>
              <th scope="col">Lastname 
                  <a href="?order_by=lastname&direction=desc">
                      <!-- This needs to be black/grey with a lower font-size -->
                      <span class="glyphicon glyphicon-triangle-top glyphicon-size-sm" aria-hidden=true></span>
                  </a>
                  <a href="?order_by=lastname&direction=asc">
                      <span class="glyphicon glyphicon-triangle-bottom glyphicon-size-sm" aria-hidden=true></span>
                  </a>
              </th>
              <th scope="col">Firstname 
                  <a href="?order_by=firstname&direction=desc">
                      <!-- This needs to be black/grey with a lower font-size -->
                      <span class="glyphicon glyphicon-triangle-top glyphicon-size-sm" aria-hidden=true></span>
                  </a>
                  <a href="?order_by=firstname&direction=asc" class="btn btn-default btn-xs">
                      <!-- This needs to be black/grey with a lower font-size -->
                      <span class="glyphicon glyphicon-triangle-bottom glyphicon-size-sm" aria-hidden=true></span>
                  </a>
              </th>
          </tr>
      </thead>
  <tbody>
  <!-- content here -->
  </tbody>
  </table>
</div>

请注意，我试图直接在HTML代码中应用样式（有效），但出于明显的原因（参见下面的代码），不想这样做。

<th scope="col">Nom 
    <a href="?order_by=lastname&direction=desc" style="color:black; font-size:9px">
        <!-- Visually OK but not clean -->
        <span class="glyphicon glyphicon-triangle-top glyphicon-size-sm text-dark" aria-hidden=true> 
        </span>
    </a>
</th>

解决方法

您需要在a标签中添加颜色。像这样：

table th a {
   color: gray;
}

table th a {
   color: gray;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
  <table class="table table-striped" id="contacts">
      <thead>
          <tr>
              <th scope="col">Lastname 
                  <a href="?order_by=lastname&direction=desc">
                      <!-- This needs to be black/grey with a lower font-size -->
                      <span class="glyphicon glyphicon-triangle-top glyphicon-size-sm" aria-hidden=true></span>
                  </a>
                  <a href="?order_by=lastname&direction=asc">
                      <span class="glyphicon glyphicon-triangle-bottom glyphicon-size-sm" aria-hidden=true></span>
                  </a>
              </th>
              <th scope="col">Firstname 
                  <a href="?order_by=firstname&direction=desc">
                      <!-- This needs to be black/grey with a lower font-size -->
                      <span class="glyphicon glyphicon-triangle-top glyphicon-size-sm" aria-hidden=true></span>
                  </a>
                  <a href="?order_by=firstname&direction=asc" class="btn btn-default btn-xs">
                      <!-- This needs to be black/grey with a lower font-size -->
                      <span class="glyphicon glyphicon-triangle-bottom glyphicon-size-sm" aria-hidden=true></span>
                  </a>
              </th>
          </tr>
      </thead>
  <tbody>
  <!-- content here -->
  </tbody>
  </table>
</div>