ブートストラップフォントアイコンの使い方

# Bootstrap について詳しく知りたい場合は、次をクリックしてください:

#Bootstrap チュートリアル この記事では、フォント アイコン (グリフィコン) について説明し、いくつかの例を通してその使用法を理解します。 Bootstrap には、200 を超えるフォント形式のグリフがバンドルされています。まず、フォントアイコンとは何なのかを理解しましょう。

フォント アイコンとは
フォント アイコンは、Web プロジェクトで使用されるアイコン フォントです。 Glyphicons Halflings には商用ライセンスが必要ですが、プロジェクトベースのブートストラップを通じてこれらのアイコンを無料で使用できます。

アイコン作者様への感謝の気持ちを込めて、ご使用の際にはGLYPHICONSのWebサイトへのリンクを記載していただければ幸いです。

#フォント アイコンを取得する

フォント アイコンは、次のファイルを含むフォント フォルダーにあります。

●glyphicons-halflings-regulator.eot

●glyphicons-halflings-regulator.svg

●glyphicons-halflings-regulator.ttf

●glyphicons-halflings-regulator。 woff

関連する CSS ルールは、dist フォルダーの css フォルダーにある bootstrap.css および bootstrap-min.css ファイルに記述されています。

使用方法

アイコンを使用するには、以下のコードを使用するだけです。アイコンとテキストの間には適切なスペースを空けてください。

<span class="glyphicon glyphicon-search"></span>

次の例は、フォント アイコンの使用方法を示しています:

<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button></p><button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User</button>

結果は次のようになります:

フォント アイコンを使用したナビゲーション

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        <span class="glyphicon glyphicon-home">Home</span></a>
                </li>
                <li>
                    <a href="#shop">
                        <span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
                </li>
                <li>
                    <a href="#support">
                        <span class="glyphicon glyphicon-headphones">Support</span></a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container --></div><!-- jQuery (Bootstrap 插件需要引入) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包含了所有编译插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

フォント アイコンのカスタマイズ

フォント アイコンの使用方法を説明しました。次に、フォント アイコンをカスタマイズする方法を見てみましょう。

上記の例から始めて、フォント サイズ、色を変更し、テキストの影を適用してアイコンをカスタマイズします。

次は開始コードです:

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User</button>

効果は次のとおりです:

カスタマイズされたフォント サイズ

フォント サイズを増減することで、アイコンを大きくしたり小さくしたりできます。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User</button>

##フォントの色のカスタマイズ

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User</button>

テキストシャドウの適用

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User</button>

以上がブートストラップフォントアイコンの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。