Bootstrap フォントアイコン
説明
Bootstrap フォントアイコンは、Web プロジェクトで使用できる無料のオープンソースアイコンセットです。数百もの一般的に使用されるアイコンが提供されており、Bootstrap フレームワークとシームレスに統合されているため、使いやすくカスタマイズも簡単です。
目次
クイックスタート
プロジェクトに Bootstrap フォントアイコンを導入するには、次の 2 つの方法があります。
CDN 経由での導入
BootstrapCDN から提供されている CSS ファイルを HTML ファイルの <head> タグ内に貼り付けます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
ローカルインストール
npm を使用して Bootstrap Icons パッケージをインストールします。
npm install bootstrap-icons
インストール後、CSS ファイルをプロジェクトにインポートします。
@import "node_modules/bootstrap-icons/font/bootstrap-icons.css";
アイコン一覧
利用可能なすべての Bootstrap フォントアイコンは、公式ウェブサイトで確認できます。ウェブサイトには検索機能があり、アイコンをクリックすると、その名前、コードポイント、使用方法が表示されます。
使用方法
アイコンを表示するには、<i> タグまたは <span> タグで囲み、対応するクラス名を指定します。
<i class="bi bi-alarm"></i>
<span class="bi bi-arrow-right"></span>
クラス名は bi で始まり、その後にアイコンの名前が続きます。たとえば、アラームアイコンを表示するには bi-alarm クラスを使用します。
サイズ
アイコンのサイズは、以下のクラスを追加することで調整できます。
| クラス名 | サイズ |
|---|---|
fs-1 |
24px |
fs-2 |
32px |
fs-3 |
48px |
fs-4 |
64px |
fs-5 |
80px |
<i class="bi bi-alarm fs-3"></i>
色
アイコンの色は、CSS を使用して変更できます。Bootstrap のユーティリティクラスを使用するか、カスタムスタイルを適用できます。
ユーティリティクラスを使用する
<i class="bi bi-alarm text-primary"></i>
カスタムスタイルを適用する
<style>
.custom-icon {
color: red;
}
</style>
<i class="bi bi-alarm custom-icon"></i>
アクセシビリティ
スクリーンリーダーユーザーに適切な代替テキストを提供するために、aria-hidden="true" 属性をアイコンに追加します。これにより、スクリーンリーダーはアイコンを無視し、ページの内容を読み上げます。
<i class="bi bi-alarm" aria-hidden="true"></i>
ライセンス
Bootstrap フォントアイコンは、MIT ライセンスの下でライセンスされています。ユーザーは、これらのアイコンを自由に使用、複製、変更、および配布できます。
よくある質問
Q1: Bootstrap フォントアイコンは商用利用可能ですか？
A1: はい、MIT ライセンスの下でライセンスされているため、商用利用も可能です。
Q2: 独自のアイコンを追加できますか？
A2: Bootstrap フォントアイコンは、あらかじめ定義されたアイコンセットです。独自のアイコンを追加する場合は、カスタムフォントを作成するか、他のアイコンライブラリを使用する必要があります。
Q3: Bootstrap 4 と Bootstrap 5 でアイコンの使い方は違いますか？
A3: はい、Bootstrap 5 ではアイコンのクラス名が変更されています。Bootstrap 4 では fas や fab などのプレフィックスが使用されていましたが、Bootstrap 5 では bi に統一されています。