Bootstrap Glyphicons

目标

フォントアイコンは、その利点からますます人気が高まっています。このチュートリアルでは、Bootstrap 3 を使用して Glyphicons を使用およびカスタマイズする方法について説明します。バックグラウンドで動作する CSS ルールを説明し、アイコンフォントの仕組みをより深く理解できるようにします。これにより、Glyphicons 以外のアイコンフォント設定にも精通できるようになります。

Glyphiconsとは

Glyphicons は Web プロジェクトで使用されるアイコンフォントです。Glyphicons の使用には商用ライセンスが必要ですが、プロジェクトベースの Bootstrap を通じてこれらのアイコンを無料で使用できます。アイコン作者への感謝の意を表すため、使用時には以下の文言を追加してください。Glyphicon 网站のリンク。

获取 Glyphicons

如果您已经から https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip 下载 Bootstrap 3（或者任何版本 3 之前の版本），您可以找到 dist 文件夹内の fonts 文件夹内の glyphicons。ここ有四个文件 - glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf と glyphicons-halflings-regular.woff。相关の CSS 规则写に dist 文件夹内の css 文件夹内の bootstrap.css と bootstrap-min.css 文件上。

Glyphiconsの使用方法

一般的に、Bootstrap 3 を使用して Glyphicons を利用するための一般的な構文は以下の通りです。

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

* は、特定のアイコンを表す任意のキーワードです。以下の例は、ボタンで使用する方法を示しています。

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

CSSルールの説明

以下のCSSルールはglyphiconクラスを構成します

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.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-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

したがって、font-faceルールは実際にはglyphiconsが見つかる場所でfont-familyと位置を宣言しています。

.glyphiconclass は、上部から 1px オフセットされた相対位置を宣言し、inline-block として表示し、フォントを宣言し、font-style と font-weight を normal に指定し、行の高さを 1 に設定します。さらに、-webkit-font-smoothing: antialiasedと-moz-osx-font-smoothing: grayscale;クロスブラウザの一貫性を実現します。

そして、ここの

.glyphicon:empty {
  width: 1em;
}

は空のglyphiconです。

ここには 200 個のクラスがあり、各クラスは 1 つのアイコンに対応しています。これらのクラスの一般的な形式は以下の通りです。

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

たとえば、この例で使用した user アイコンの class は次のとおりです。

.glyphicon-user:before {
  content: "\e008";
}

その使用方法についてはすでに確認しました。次に、Glyphicons をカスタマイズする方法を見ていきましょう。

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

以下は開始コードです

<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="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>

定制 Glyphicons

ここをクリックして、Glyphicons をオンラインでカスタマイズしてください。