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

これは、ラスター画像形式、ベクター画像形式、およびフォントとして使用できる単色アイコンのライブラリです。フォント形式で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には、いくつかのアイコンがあります。それらの1つを選択し、アイコンクラスの名前を<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でアイコンのサイズを定義し、クラス名と一緒に使用することで、アイコンのサイズを拡大または縮小できます。次の例では、サイズを6emと定義しています。

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

次の出力が生成されます-