How to show Bootstrap table with sort icon

Question

Am new to Bootstrap, i have a requirement to show a table with sort up and down arrow near to title of the table. This is my table structure

<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th><b>#</b>  <i class='icon-arrow-up'></i><i class='icon-arrow-down'></th> **// tried** 
            <th ><b>Name</b></th>
            <th><b>Email</b></th>
            <th><b>Team</b></th>
            <th ><b>Role</b></th>
            <th ><b>Timezone</b></th>
            <th><b>Connections</b></th>
            <th><b># Posts available</b></th>
            <th><b>Last Login</b></th>
            <th><b>Posts</b></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

I want to display sort up/down arrows similar to the following image.

Please help me to solve this issue. Your help is much appreciated. Thank you.

Answer 1

You could try using FontAwesome. It contains a sort-icon (http://fontawesome.io/icon/sort/).

To do so, you would

1. need to include fontawesome:

   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   

2. and then simply use the fontawesome-icon instead of the default-bootstrap-icons in your th's:

   <th><b>#</b> <i class="fa fa-fw fa-sort"></i></th>
   

Hope that helps.

Answer 2

Use this icons with bootstrap (glyphicon):

<span class="glyphicon glyphicon-triangle-bottom"></span>
<span class="glyphicon glyphicon-triangle-top"></span>

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_triangle-bottom&stacked=h

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_triangle-bottom&stacked=h