Bootstrapのテーブルをソートアイコンで表示する方法

Bootstrapの初心者ですが、テーブルのタイトルの近くに上下のソート矢印を表示させるという要件があります。これは私のテーブル構造です

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

以下の画像のようなソートアップ/ダウン矢印を表示させたいのですが、どうすればよいでしょうか？ 。

この問題を解決するために、ご協力をお願いします。あなたの助けは非常に感謝されます。ありがとうございました。

Dibish
編集された質問 5日 8月 2014 в 4:49
プログラミング
twitter-bootstrap-3 twitter-bootstrap
5日 8月 2014 в 4:41
28 ビュー
質問へのコメント (2)
ソリューション

FontAwesome**を使ってみてはいかがでしょうか。sort-icon(http://fontawesome.io/icon/sort/)が入っています。

そのためには、次のようにします。

  1. fontawesomeをインクルードする必要があります。

  2. そして、th'内のデフォルトのbootstrap-iconsの代わりにfontawesome-iconを使うだけでいいのです。

     <th># </th>

お役に立てれば幸いです。

nozzleman
編集した答え 5日 8月 2014 в 9:08
解説 (4)

このアイコンは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

Dudi
編集した答え 19日 9月 2016 в 6:56
解説 (5)

上下の矢印だけ表示させればよいのであれば、これで解決です。 もし、それらを機能させたいのであれば、このBOOTSTRAP TABLEを使用することができます。

Tudor
編集した答え 29日 3月 2017 в 2:33
解説 (0)