ブートストラップ フォント アイコン


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

フォントアイコンとは何ですか?

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

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

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

環境インストールの章で Bootstrap 3.x バージョンをダウンロードし、そのディレクトリ構造を理解しました。フォント アイコンは、fonts フォルダー内にあります。このフォルダーには、次のファイルが含まれています:

  • glyphicons-halflings-normal.eot

  • glyphicons-halflings-normal.svg

  • glyphicons-halflings-normal 。 ttf

  • glyphicons-halflings- Regular.woff

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

フォント アイコン リスト

ここをクリックすると、利用可能なフォント アイコンのリストが表示されます。

CSSルールの説明

以下のCSSルールはグリフィコンクラスを構成します。

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-normal.eot');
src: url('../fonts/ glyphicons-halflings-normal.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings- Regular.woff') format('woff'), url('.. /fonts/glyphicons-halflings- Regular.ttf') format('truetype')、url('../fonts/glyphicons-halflings-normal.svg#glyphicons_halflings Regular') format('svg');
}

。 glyphicon {
位置: 相対;
トップ: 1px;
表示: インラインブロック;
フォントファミリー: 'Glyphicons Halflings';
-webkit-font-smoothing: アンチエイリアス;
フォント スタイル: 通常;
font-weight : 通常;
行の高さ: 1;
-moz-osx-font-smoothing: グレースケール;
}

つまり、font-face ルールは実際にグリフィコンが見つかるフォントファミリーと位置を宣言します。

.glyphicon クラスは、上から 1px の相対位置オフセットを宣言し、インラインブロックとしてレンダリングし、フォントを宣言し、通常どおり font-style と font-weight を指定し、行の高さを 1 に設定します。それ以外の場合は、ブラウザー間の一貫性を保つために -webkit-font-smoothing: antialiased および -moz-osx-font-smoothing: greyscale; を使用します。

それでは、

.glyphicon:empty {
width: 1em;
}

は空のグリフィコンです。

ここには 200 のクラスがあり、各クラスはアイコン用です。これらのクラスの一般的な形式は次のとおりです:

.glyphicon-keyword:before {
content: "hexvalue";
}

たとえば、使用されるユーザー アイコンには次のクラスがあります:

.glyphicon-ユーザー:前 {
コンテンツ: "e008";
}

使用方法

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>ブートストラップ 实例 - 字体图标の使用方法</title>
<link href="http://libs.baidu. com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min. js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></ head>
<body>

<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> ユーザー
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> ユーザー
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> ユーザー
</button>


</body>
</html>

实例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

带有导航栏的字体图标

<!DOCTYPE html>
<html>
<head>
<title>导航栏的字体图标</title>
<メタ名= viewport" content="width=device-width, initial-scale=1.0">
<!-- ブートストラップ -->
<link href="http://apps.bdimg.com/libs/bootstrap /3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<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">ナビゲーションの切り替え</span>
<span class="icon-bar"></span>
<span class="アイコン-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" >プロジェクト名</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://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

实例

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <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://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

定制字体图标

我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。

我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码：

<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"></スパン>ユーザー
</button>

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

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

テキストシャドウを適用

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

オンラインカスタムフォントアイコン

アイコンリスト

<td

<t

グリフィcon glyphicon-cloud 試してみるグリフィコン グリフィコン-エンベロープ試してみるグリフィコン グリフィコン-鉛筆試してみる試してみる試してみる試してみる試してみるそれ試してみてください試してみてください試してみてください試してみる試してみる試してみる試してみる
アイコンクラス名インスタンス
glyphicon glyphicon-asterisk試してみる
gly phicon glyphicon-plus試してみる
グリフィコン グリフィコン-マイナス試してみる
グリフィコン グリフィコン-ユーロ試してみる
グリフィコン-グラス 試してみる
グリフィコン グリフィコン - 音楽 試してみる
glyphicon glyphicon-search試してみる
glyphicon glyphicon-heart試してみる
glyphicon glyphicon-star 試してみるそれ
glyphicon glyphicon-star-empty試してみる
glyphicon glyphicon-user試してみる
glyphicon glyphicon-film 試してみるそれ
glyphicon glyphicon-th-large試してみる
glyphicon glyphicon-th試してみる
glyphicon glyphicon-th -list 試してみる
グリフィコン グリフィコン-OK試してみる
グリフィコン グリフィコン-削除試してみる
グリフィコン ズームイン試してみる
グリフィコン ズームアウト試してみる
グリフィコングリフィコンオフ試してみましょう
glyphicon glyphicon-signal試してみる
glyphicon-cog試してみる
glyphi con glyphicon-trash試してみましょう
glyphicon glyphicon-home試してみる
glyphicon glyphicon-file試してみる
glyphicon gリフィコンタイム試してみる
glyphicon glyphicon-road試してみる
glyphicon glyphicon-download-alt試してみる
glyphicon glyphicon-download 試してみる
glyphicon glyphicon-upload 試してみる
glyphicon glyphicon-inbox 試してみる
glyphicon-play-circ le 試してみましょう
glyphicon glyphicon-repeat試してみる
glyphicon glyphicon-refresh試してみる
glyphicon glyphicon-list-alt 試してみる
グリフィコン グリフィコン-ロック試してみる
グリフィコン グリフィコン-フラグ試してみる
グリフィコン-ヘッドフォン 試してみる
グリフィコン グリフィコン-ボリュームオフお試しください
グリフィコン - 音量ダウン試してみる
グリフィコン - 音量を上げる試してみる
グリフィコンglyphi con-qrcode試してみましょう
glyphicon glyphicon-barcode試してみる
glyphicon-tag試してみる
glyphicon glyphicon-tags試してみる
グリフィコン グリフィコン-ブック試してみる
グリフィコン グリフィコン-ブックマーク試してみる
グリフィコン-印刷する試してみる
glyphicon glyphicon-camera試してみる
glyphicon glyphicon-font試してみる
glyphicon-bold
グリフィコン グリフィコン - 斜体 試してみる
glyphicon glyphicon-text-height試してみる
glyphicon glyphicon-text-width
グリフィコン glyphicon-align-左試してみる
glyphicon glyphicon-align-center試してみる
glyphicon glyphicon-align-right 試してみる
グリフィコンglyphicon-align-justify試してみる
glyphicon-list試してみる
gly phicon glyphicon-indent-left試してみる
グリフィコン-インデント-右試してみる
グリフィコン-フェイスタイム-ビデオ試してみる
グリフィコングリフィコンピクチャー試してみてください
グリフィコングリフィコンマップマーカー試してみる
グリフィコン調整試してみる
glyphicon glyphicon-tint試してみる
glyphicon glyphicon-check試してみる
glyphicon glyphicon-move試してみる
glyphicon glyphicon-step-backward 試してみる
glyphicon glyphicon-早戻し-早戻し試してみる glyphicon glyphicon-pause
glyphicon glyphicon-stop
グリフィコン glyphicon-forward
グリフィコン グリフィコン-早送り
グリフィコン-ステップフォワード
グリフィコン グリフィコン-取り出し
glyphicon glyphicon-che vron-left
グリフィコン-山形-右試してみる
グリフィコン-プラス記号試してみる
glyphi con-minus-sign試してみる
グリフィコン グリフィコン-削除-サイン試してみる
グリフィコン グリフィコン-OK-サイン試してみる
グリフィコン glyphicon-question-sign 試してみる
glyphicon glyphicon-info-sign試してみる
glyphicon glyphicon-スクリーンショット試してみる
グリフィコン グリフィコン-削除-サークル試してみる
glyphicon glyphicon-ok-circle試してみる
glyphicon-ban-circle試してみる
グリフィコン グリフィコン-arrow-left試してみる
glyphicon glyphicon-arrow-right試してみる
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down試してみる
glyphicon glyphicon-share-alt試してみる
glyphicon -サイズフル試してみる
glyphicon glyphicon-resize-small試してみる
glyphicon glyphicon-exclamation-sign試してみる
グリフィコングリフィコンギフト試してみてください
glyphicon glyphicon-leaf試してみてください
グリフィコン-ファイア試してみる
グリフィコン-目-開く試してみる
グリフィコン-目-閉じる試してみる
glyphicon glyphicon-warning-sign試してみる
glyphicon-plane試してみる
gly phicon gリフィコンカレンダー試してみる
グリフィコン-ランダム試してみる
グリフィコン-コメント試してみる
グリフィコン-magnet試してみてください
グリフィコン グリフィコン-シェブロン-アップ試してみる
グリフィコン グリフィコン-シェブロン-ダウン試してみる
グリフィコンphicon-リツイート試してみましょう
glyphicon glyphicon-shopping-cart試してみる
glyphicon glyphicon-folder-close試してみる
glyphicon glyphicon-folder-open試してみる
glyphicon glyphicon-resize-vertical試してみる
glyphicon glyphicon-resize-horizo​​ntal試してみる
glyphicon glyphicon-hdd 試してみるそれ
グリフィコン・グリフィコン・ブルホーン試してみる
グリフィコン・グリフィコン・ベル試してみる
glyphicon glyphicon-certificate試してみる
グリフィコン-サムズアップ試してみる
グリフィコン-サムズダウン試してみる
グリフィコンphicon-hand-right試してみてください
グリフィコン グリフィコン-左手試してみる
グリフィコン グリフィコン-左手試してみる
グリフィコン グリフィコン-お下がり試してみる
glyphicon glyphicon-circle-arrow-right試してみる
glyphicon glyphicon-circle-arrow-left試してみる
glyphicon glyphicon-circle-arrow-up試してみる
glyphicon-circle-arrow-down試してみる
glyphicon-globe 試してみる
グリフィコン グリフィコン レンチ試してみる
グリフィコン グリフィコン タスク試してみる
glyphicon グリフィコンフィルター試してみる
グリフィコン-ブリーフケース試してみる
グリフィコン-フルスクリーン試してみる
グリフィコン-ダッシュボード試してみる
glyphicon glyphicon-ペーパークリップ試してみる
glyphicon glyphicon-heart-empty試してみる
glyphicon glyphicon- link 試してみる
glyphicon glyphicon-phone試してみましょう
glyphicon glyphicon-pushpin試してみる
glyphicon glyphicon-usd試してみる
glyphicon con-g bp試してみてください
glyphicon glyphicon-sort 試してみる
glyphicon glyphicon-sort-by-alphabet 試してみる
glyphicon glyphicon-sort-by-alpha
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
グリフィコンglyphicon-sort-by-attributes-alt
glyphicon glyphicon-sort-by-attributes-alt
glyphi con gly phicon-未チェック試してみる
glyphicon glyphicon-expand 試してみる
glyphicon-collapse-down 試してみる
グリフィコン グリフィコン-折りたたみ-アップ 試してみる
glyphicon glyphicon-log-in試してみる
glyphicon glyphicon-flash試してみる
グリフィコン glyphicon-log- 試してみる
glyphicon glyphicon-new-window試してみる
glyphicon glyphicon-record
グリフィコン グリフィコン-保存 試してみる
glyphicon glyphicon-open試してみる
glyphicon glyphicon に保存されました試してみましょう