CSS: Show glyphicon just below another glyphicon

Question

CSS: Show glyphicon just below another glyphicon

Navigation

#1 by (3 votes)

2

I have this view:

I would like the arrows to look both to the right of the name of the column, one on top of the other .

What CSS style should I apply to the .glyphicon-arrow-up and .glyphicon-arrow-down class?

.glyphicon-arrow-up{
font-size:12px;
position:absolute;
margin-top:6px;
}
.glyphicon-arrow-down{
font-size:12px;
position:absolute;
margin-top:19px;
}

<table class="table">
        <thead>
          <tr>
            <th class="columnidclient thcenter">ID<a href="{{route('admin.clients.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a><a href="{{route('admin.clients.order',['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
            <th>Nombre<a href="{{route('admin.clients.order', ['field' => 'name','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a><a href="{{route('admin.clients.order',['field' => 'name','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByNameDesc"></span></a></th>
            <th>Slug<a href="{{route('admin.clients.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a><a href="{{route('admin.clients.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDesc"></span></a></th>
            <th class="thcenter">Prioridad<a href="{{route('admin.clients.order', ['field' => 'priority','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a><a href="{{route('admin.clients.order',['field' => 'priority','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPriorityDesc"></span></a></th>
            <th><span class="glyphicon glyphicon-cog"></span>Acciones</th>
          </tr>
        </thead>
        </table>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

html css

asked by Lluís Puig Ferrer 14.09.2017 в 13:05

source

1 answer

Combine C ++ and Python Convert a switch to linq

score 3 · Accepted Answer

The bootstrap styles were overwriting the position because the class .glyphicon has a position:relative . Adding the class .glyphicon to yours gives them more specificity and will pick up your styles.

I also add position: relative to th to use as a reference.

th {
  position: relative;
}

.glyphicon.glyphicon-arrow-up {
  font-size: 12px;
  position: absolute;
  top: 6px;
}

.glyphicon.glyphicon-arrow-down {
  font-size: 12px;
  position: absolute;
  top: 19px;
}

<table class="table">
  <thead>
    <tr>
      <th class="columnidclient thcenter">ID
        <a href="{{route('admin.clients.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a>
        <a href="{{route('admin.clients.order',['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
      <th>Nombre<a href="{{route('admin.clients.order', ['field' => 'name','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a><a href="{{route('admin.clients.order',['field' => 'name','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByNameDesc"></span></a></th>
      <th>Slug<a href="{{route('admin.clients.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a><a href="{{route('admin.clients.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDesc"></span></a></th>
      <th class="thcenter">Prioridad<a href="{{route('admin.clients.order', ['field' => 'priority','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByAsc"></span></a>
        <a href="{{route('admin.clients.order',['field' => 'priority','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPriorityDesc"></span></a>
      </th>
      <th><span class="glyphicon glyphicon-cog"></span>Acciones</th>
    </tr>
  </thead>
</table>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">