0

I need to use boostrap 3.x Glyficons icons as buttons/links for sortable table columns (arrows for ascending and descending ordering). I started creating my own CSS class for inner tag whose glyficon CSS classes are applied to but this doesn't work as icon get inherited color instead.

I need to overwrite attibutes (and/or parent tag(s) attributes) in order to modify color (to black or grey) and size of the icons. Currently glyficons arrows appears with blue color, this seem to be inherited by enclosing tag.

How to cleany apply my own color/size to glyficons icons in this case?

HTML code (only relevant parts)

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

Note that I tried to apply style directly in HTML code (which works) but don't want to go that way for obvious reasons (see code below).

<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>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
donmelchior
  • 893
  • 3
  • 13
  • 31
  • Does this answer your question? [Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2](https://stackoverflow.com/questions/18334851/change-the-color-of-glyphicons-to-blue-in-some-but-not-at-all-places-using-boot) – Sandrin Joy Sep 09 '20 at 10:12

1 Answers1

1

You need to add color in a tag. like this:

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>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41