メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

Bootstrapアイコン(Bootstrap Icons) v5.2.0新設

1,800以上のアイコンを備えた無料の高品質なオープンソースアイコンライブラリ。SVG、SVGスプライト、Webフォントなど、好きなようにそれらを組み込める。Bootstrapの有無に関係なく、どのプロジェクトでも使用できる。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。

アイコンの種類(Icons)

量が多いので、公式サイトを参照して下さい(最新版はv1.9.1)。

インストール(Install)

Bootstrapアイコンはnpmに公開されているが、必要に応じて手動でダウンロードもできる。

パッケージマネージャー(Package manager)v5.2.0"npm"から名称変更

npmやComposerを使用して、Bootstrapアイコン(SVG、アイコンスプライト、アイコンフォントを含む)をインストール。次に、使い方の項目にあるアイコンを組み込む方法を選択。

設定例
npmの実行コマンド$ npm i bootstrap-icons
Composerの実行コマンドcomposer require twbs/bootstrap-icons
【変更履歴】
  • 【v5.2.0】
    • v1.9.0からComposerを使用してインストール可能に(それに伴い項目のタイトルを「パッケージマネージャー」に変更)

ダウンロード(Download)

リリース版がGitHubで公開されており、アイコンSVG、フォント、ライセンス、readmeが入っている。package.json も入っているが、npmスクリプトは主に開発ワークフローで使用できる。

最新のZIPをダウンロード

CDN

CDNからアイコンフォントスタイルシートをWebサイトの <head> 内かCSSの @import を経由して組み込めば数秒で使用開始できる(最新版はv1.9.1)。実例は、アイコンフォントの項目に記載。

HTMLの場合<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" integrity="sha384-xeJqLiuOvjUBq3iGOjvSQSIlwrpqjSHXpduPd6rQpuiM3f5/ijby8pCsnbu5S81n" crossorigin="anonymous">
CSSの場合@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.min.css");

使い方(Usage)

BootstrapアイコンはSVGであるため、プロジェクトの設定方法に応じて、様々な方法でHTMLに組み込める。font-size で簡単にサイズを変更できるように width: 1em(オプションで height: 1em も)での使用を推奨。

埋め込み(Embedded)

(外部画像ファイルではなく)ページのHTML内にアイコンを埋め込む。ここでは、任意の widthheight を使用。

見本
設定例
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>
【設定】
  • 各SVGは、公式サイトに記載されている各アイコンをクリックし、"Copy HTML"の項目に記載されているコードをコピーして使用
  • widthheight は任意に設定可能

SVGスプライト(Sprite)

SVGスプライトを使用して、<use> 要素を経由して任意のアイコンを挿入。アイコンのファイル名をフラグメント識別子として使用(例:toggles#toggles)。SVGスプライトを使用すると、<img> 要素に似た外部ファイルを参照できるが、currentColor の機能を使用して簡単にテーマを設定できる。

注意!<use> がドメイン間で機能しないChromeの問題がある。

見本
設定例
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>
【設定】
  • SVGスプライトは、ダウンロード版を解凍後、bootstrap-icons.svg を任意のディレクトリにアップして使用(CDNでの bootstrap-icons.svg の使用はできない)
  • 利用したいアイコン名は、公式サイトに記載されている各アイコンの下に記載の名称を使用し、先頭に # をつける

外部画像(External image)

個別のBootstrapアイコンSVGを任意に選択したディレクトリにコピーし、<img> 要素を使用して通常の画像のように使用。

見本
Bootstrap
設定例
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">
【設定】
  • 各SVGは、公式サイトに記載されている各アイコンをクリックし、"Download"の項目に記載されているDownload SVGからダウンロードして使用
  • widthheight は任意に設定可能

アイコンフォント(Icon font)

Bootstrapアイコンには、すべてのアイコンのクラスを持つアイコンフォントも組み込まれている。CSSを経由してページにアイコンのWebフォントを組み込み、必要に応じてHTMLでクラス名を参照(例:<i class="bi-alarm-clock"></i>)。

1.通常の使用

見本
設定例
<i class="bi bi-alarm"></i>

2.任意にスタイルを設定

font-sizecolor を使用して、アイコンの外観を変更。

見本
設定例
<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
【設定】
  • CDNの項目に記載の方法でアイコンフォントファイルを取得して使用
  • 各アイコンのコードは、公式サイトに記載されている各アイコンをクリックし、"Icon font"の項目に記載されているコードをコピーして使用

CSS

1.SVGアイコンで設定

CSS内でSVGの使用もできる(16進色の値を指定するときは、#%23 などに必ずエスケープして下さい)。<svg>widthheight でサイズが指定されていない場合、アイコンで使用可能なスペースを埋め込む。

アイコンのサイズを background-size で変更する場合は、viewBox 属性が必要。xmlns 属性が必須であることにも注意。

見本1:background-imageで設定
見出し
設定例
HTML<span class="bi-a1">見出し</span>
CSS.bi-a1::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -.125em;
  content: "";
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>"); /* dot */
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
見本2:contentで設定
見出し
設定例
HTML<span class="bi-a2">見出し</span>
CSS.bi-a2::before {
  display: inline-block;
  vertical-align: -.125em;
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/%3E%3C/svg%3E"); /* dot */
}
【設定】
  • データURLのSVGは、公式サイトに記載されている各アイコンをクリックし、"Copy HTML"の項目に記載されているコードをコピーして使用
  • contentで設定する場合は、widthheight の設定と <%3C>%3E にエスケープする必要あり(SVG エスケープツールの変換ツールでエンコードすると便利)
  • カラーは、fillcurrentColor から任意のカラーに設定( #fff などにする場合は #%23 にエスケープする必要あり)

2.フォントアイコンで設定

見本1:.bi-* で設定
一時停止
設定例
HTML<span class="bi-b">一時停止</span>
CSS.bi-b::before {
  padding-right: .25rem;
  content: "\F4C1"; /* pause-circle-fill */
  font-size: 1.25rem;
}
見本2:.bi-* 以外で設定
一時停止
設定例
HTML<span class="icon-b">一時停止</span>
CSS.icon-b::before {
  padding-right: .25rem;
  content: "\F4C2"; /* pause-circle */
  font-family: bootstrap-icons;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  vertical-align: -.125em;
}
【設定】
  • content に入れるアイコンフォントのUnicodeは、公式サイトに記載されている各アイコンをクリックし、"Code point"の"CSS"に記載されているコードをコピーして使用
  • .bi-* 以外のクラスで設定する場合は、font-family, font-weight, line-height, vertical-align の設定もする(.bi-* の場合は、CDNの bootstrap-icons.min.css に設定があるので不要)

スタイリング(Styling)

カラーは、.text-* クラスや任意のCSSの設定で変更できる。

見本
設定例
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-exclamation-triangle text-success" viewBox="0 0 16 16">
  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
</svg>

アクセシビリティ(Accessibility)

純粋に装飾的なアイコンの場合は、aria-hidden="true" を追加し、それ以外の場合は、適切な代替テキストを提供して下さい。アイコンを追加するために使用している方法と、アイコンを使用している場所(スタンドアロンの画像としてか、ボタンや同様のコントロールの唯一のコンテンツとして)に応じて、様々なアプローチが考えられる。以下にいくつかの例を表示:

見本1:外部画像の場合
Bootstrap
設定例
<!-- <img>要素のalt="..." -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
見本2:アイコンフォントの場合
設定例
<i class="bi bi-github" role="img" aria-label="GitHub" ...></i>
見本3:SVGスプライトの場合
設定例
<svg class="bi" ... role="img" aria-label="ツール">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>
見本4:ボタンアイコンの場合
設定例
<!-- コントロールのaria-label="..." -->
<button ... aria-label="ミュート">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

SVGの操作(Working with SVGs)

SVGは操作するのに最適だが、回避すべきいくつかの既知の定義がある。SVGを使用する方法は多数あるため、これらの属性と回避策をコードに含めていない。

既知の問題は以下のとおり:

  • SVGは、Internet ExplorerとEdge Legacyでデフォルトでフォーカスを受け取る。SVGを埋め込むときは、<svg> 要素に focusable="false" を追加。詳細は、StackOverflowを参照。
  • <img> 要素でSVGを使用する場合、スクリーンリーダーはそれらを画像として知らせないか、画像を完全にスキップする場合がある。問題を回避するために、<img> 要素に追加の role="img" を入れる。
  • 外部SVGスプライトがInternetExplorerで正しく機能しない場合がある。必要に応じてSVG for Everybodyポリフィルを使用。

SVGに関する注意すべき別の問題が見つかったら、詳細を共有するために、GitHubのIssuesを開いて指摘して下さい。