ブートストラップフォントアイコンの使い方-ブートストラップのチュートリアル-php.cn

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

angryTom

リリース： 2019-07-27 11:41:43

オリジナル

5020 人が閲覧しました

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

# 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 サイトの他の関連記事を参照してください。