如何将自定义颜色应用于使用 Bootstrap 3.3.x 设置样式的 link 中嵌入的 glyphicon 图标？

Question

我需要使用 boostrap 3.x Glyficons 图标作为 buttons/links 用于 sortable table 列（用于升序和降序的箭头）。我开始为应用了 glyficon CSS classes 的内部标签创建自己的 CSS class 但这不起作用，因为图标获得了继承的颜色。

我需要覆盖属性（and/or 父标签属性）以修改图标的颜色（黑色或灰色）和大小。目前 glyficons 箭头显示为蓝色，这似乎是通过封闭标签继承的。

在这种情况下，如何将我自己的 color/size 干净地应用到 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>

Answer 1

您需要在 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>

如何将自定义颜色应用于使用 Bootstrap 3.3.x 设置样式的 link 中嵌入的 glyphicon 图标？

How to apply custom color to glyficon icon embed within a link styled with Boostratp 3.3.x?

html

css

twitter-bootstrap-3