时间戳

首页 > 解决方案 > 如何将自定义颜色应用于嵌入在 Boostratp 3.3.x 样式的链接中的 glyficon 图标？

html - 如何将自定义颜色应用于嵌入在 Boostratp 3.3.x 样式的链接中的 glyficon 图标？

问题描述

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

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

在这种情况下，如何将我自己的颜色/大小应用于 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>

标签： htmlcsstwitter-bootstrap-3

解决方案

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

推荐阅读