Bootstrap5は最も人気のあるCSSフレームワークの一つ。そのBootstrap5には高品質で使いやすいアイコンが2,000種類以上も用意されており、簡単に導入することができます。
この記事では、Bootstrap5アイコンの種類、使い方、ダウンロード方法、表示されない場合の対策などを解説していきます。
Bootstrap5アイコンとは？
Bootstrap5のアイコンはMITライセンスで公開されている無料のアイコンライブラリです。
画像やSVGのコード、アイコンフォントで使用できるのでFontAwesomeから乗り換えても問題なく使用できるようになっています。
Bootstrap5アイコン一覧
Bootstra5のアイコン一覧は以下のページで公開されています。
このページではキーワードを入力することで目的のアイコンを探すことができ、アイコンをクリックすると、アイコンフォントのコードやSVGコード、ボタンなどで使用した場合のサンプルが表示されます。
Bootstrap5アイコンとFontAwesomeアイコンの違い
Bootstrap5とよく似たものにFontAwesomeアイコンがあります。
FontAwesomeは有料のアイコンを含めると3万以上ありますが、無料で使えるものは2000程度となっています。
アイコンのデザインは線が太めで塗りつぶされたものが多いため、細めのラインアイコンが欲しい場合はBootstrap5の方が使いやすいかもしれません。
Bootstrap5アイコンはどうすれば使えるようになる？
Bootstrap5アイコンはBootstrap5のCSSを読み込んだだけでは使えません。
Bootstrap5のアイコンは以下の方法で使えるようになります。
- アイコン用のCSSファイルを読み込んでアイコンフォントで使用する
- SVGをコピーして使う
ここからはBootstrap5のアイコンの使い方を詳しく紹介していきます。
Bootstrap5アイコンの使い方
Bootstrap5アイコンの使い方を解説します。Booptstrap5アイコンはBootstrap5とは別のCSSを読み込むかSVGをコピーして使う必要があります。
まずはCSSを読み込む方法から解説します。
アイコンのCSSを読み込む
Bootstrap5のアイコン用のCSSはアイコンページの下の方にあるリンクからダウンロードするか、CDNのコードをコピーしてheadの中に入れます。
ダウンロードする場合はリンク先から「bootstrap-icons-1.11.3.zip」をダウンロードします(バージョンは記事執筆時のもの)。
以下でCDNリンクを使う場合のサンプルコードを載せておきます。ダウンロードした場合はファイルのパスを書き換えてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<!-- HTMLの中身 -->
</body>
</html>アイコンをHTMLに埋め込む方法
CSSを読みこめたらアイコンのコードを書いて画面に表示させます。
HTMLコードで書く場合は以下のようにiタグを使ってClass名のところにアイコン名を入れます。bi-アイコン名となるようにします。
<i class="bi bi-alarm"></i>アイコン名はアイコン一覧ページで取得できます。
SVGアイコンを使う場合はアイコン一覧ページで使いたいアイコンをクリックして詳細ページから取得できます。
例えばalarmならこのようになります。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>アイコンのサイズを変更する方法
アイコンのサイズはCSSスタイルやHTMLのstyle属性でfont-sizeを使って変更できます。
<i class="bi-alarm" style="font-size: 2rem;"></i>SVGアイコンを使っている場合はsvgタグのwidthとheightの値を変更すればサイズを変えられます。
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>アイコンの色を変更する方法
アイコンの色を変えるには、サイズと同様CSSやstyle属性を使ってcolorを変更します。
<i class="bi-alarm" style="color: blue;"></i>SVGアイコンの場合は、CSSコードのfillプロパティかfill属性を変更します。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
<path fill="blue" d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
<path fill="blue" d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>アイコンを使ってボタンを作成する
Bootstrap5のアイコンをボタンに使うこともできます。
<a href="#" class="btn btn-primary px-5 position-relative">
アイコンボタン
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right position-absolute top-50 end-0 translate-middle-y me-1" viewBox="0 0 16 16">
<path fill="white" fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</a>
ボタンの作り方について詳しくはこちらをご覧ください。
-> Bootstrap5のボタン 色・形・配置の変更とおしゃれなデザインにする方法
Bootstrap5アイコンが表示されない時の対策
アイコンがうまく表示されない場合に考えられる原因としては以下のようなことが考えられます。
- CSSファイルの読み込みミス
- アイコンフォントのアイコン名の入力ミス
- SVGのコピーミス
- CSSで非表示や背景色と同じ色になっている
以下で詳しく解説します。
CSSファイルの読み込みミス
CSSファイルのパスが正しいかを確認してください。
相対パスの場合、正しい階層にあるか、ファイル名に入力ミスがないか、最後の.cssを書き忘れていないかなどを確認してみてください。
アイコンフォントのアイコン名の入力ミス
アイコンフォントでアイコンを表示しようとしている場合、Class名に入力ミスがないかを確認してください。
アイコン名が正しく入力されているか、bi-を書き忘れていないかなどを確認してみてください。
SVGのコピーミス
SVGアイコンを使っていてうまく表示されない場合はタグのコピーミスが考えられます。
タグの途中までしかコピーできてなかったり、入力ミスがないか確認してみてください。
CSSで非表示や背景色と同じ色になっている
ファイル読み込みもコードも問題ない場合、別のCSSコードで非表示になっていたり、背景色と同じ色になって見えなくなっている可能性があります。
ChromeのDevtoolを開いてCSSスタイルをいじってみてください。
まとめ
この記事ではBootstrap5のアイコンの使い方や不具合の対策いついて解説しました。まとめるとこちらのようになります。
- Bootstrap5のアイコンは無料で1,800以上のアイコンが使える
- FontAwesomeアイコンよりも使いやすいものが多く高品質
- 使用するにはCDNで読み込むかダウンロードしてHTMLにインポートする
- 色やサイズを変更することができる
アイコンフォントとしても使えるので今までFontAwesomeアイコン使ってた人もBootstrap5を使うならこちらのアイコンがおすすめです。