ブートストラップグリフィコン

これは、ラスターイメージ形式、ベクターイメージ形式、およびフォントとして使用可能なモノクロアイコンのライブラリです。フォント形式で250以上のグリフを提供します。これらのフォントをWebプロジェクトで使用できます。これらのグリフは無料ではありませんが、Bootstrapベースのプロジェクトで使用する場合に何かを使う必要がない場合は無料です。

フォント（ライブラリ）の読み込み

Bootstrap Glyphiconsライブラリをロードするには、Webページの<head>セクションに次の行をコピーして貼り付けます。

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

アイコンを使用する

Bootstrap Glyphiconsには多数のアイコンが用意されています。それらのいずれかを選択し、アイコンクラスの名前を<body>タグ内のHTML要素に追加します。次の例では、ツリーのアイコンを使用しており、そのクラス名は tree-deciduous です。

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>

   <body>
      <i class = "glyphicon glyphicon-tree-deciduous">  </i>
   </body>
</html>

それは次の出力を生成します-

サイズの定義

以下に示すように、CSSでサイズを定義し、クラス名とともに使用することにより、アイコンのサイズを拡大または縮小できます。次の例では、サイズを6 emとして定義しています。

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>

   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

次のような出力が生成されます。

色の定義

CSSを使用してアイコンの色を定義できます。次の例は、ツリーアイコンの色を変更する方法を示しています。

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>

   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>