Bootstrap Icons

アイコン

インストール

Bootstrap Iconsはnpmに公開されますが、必要に応じて手動でダウンロードすることもできます。

Package manager

SVG、アイコンスプライト、アイコンフォントを含むBootstrap IconsをnpmまたはComposerと一緒にインストールします。次に、使用説明書にアイコンを含める方法を選択します。

npm i bootstrap-icons

composer require twbs/bootstrap-icons

ダウンロード

リリースはGitHubで公開され、アイコン SVG、フォント、ライセンス、readmeが含まれています。npmスクリプトは主に開発ワークフローのために利用されていますが、私たちのpackage.jsonも含まれています。

最新のZIPをダウンロード

CDN

アイコンフォントのスタイルシートを、CSS内で<head>もしくは@importで読み込むことで、すぐに使い始めることができます。詳しくはドキュメントを参考にしてください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

使い方

Bootstrap IconsはSVGなので、プロジェクトのセットアップ方法に応じて、いくつかの方法でHTMLに含めることができます。font-sizeを使用して簡単にサイズを変更するには、width:1em(オプションでheight:1em)を使用することをお勧めします。

組み込み

画像ファイルを使わずに、アイコンをHTMLに組み込みましょう。この例ではwidthとheightをカスタムしています。

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

スプライト

<use>要素を用いて、アイコンの挿入にSVGスプライトを使えます。アイコンのファイル名をフラグメント識別子として使います（例: togglesは#toggles）。SVGスプライトは<img>要素と似た形で参照できますが、currentColorを使うことで簡単にテーマを設定できます。

注意Chromeにおいて、複数のドメイン間にて<use>が動作しないというバグが報告されています。

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

外部の画像

Bootstrap IconsのSVGをコピーしディレクトリに追加することで、通常の画像のように<img>要素を使ってアイコンを参照できます。

<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">

アイコンフォント

アイコンWebフォントをCSS経由で読み込むことで、HTML内でクラス名として参照することができます (例：<i class="bi-alarm-clock"></i>)。

アイコンの見た目を変えるには、font-sizeとcolorを使います。

<i class="bi bi-alarm"></i>

<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

CSS

SVGはCSS内でも利用できます（色を指定するときには#は%23に変換するように、全ての文字はエスケープするようにします）。<svg>にwidthとheightの指定がない場合は、アイコンは余った領域を埋めるようにリサイズされます。

viewbox属性はbackground-sizeに応じてアイコンをリサイズするために使われます。ただしxmlns属性が必要です。

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  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>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

スタイル

色を変えるときには、.text-*クラスまたはカスタムCSSを使います。

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

アクセシビリティ

アイコンが装飾用途の場合、aria-hidden="true"を付加します。そうでない場合には、適切な代替のテキストを付与するようにします。アイコンを使う方法やどの場所で使っているか（例：スタンドアロンの画像なのか、ボタン内なのか）にもよりますが、次のようなアプローチがあります：

<!-- alt="..." on <img> element -->
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>

<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>

<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

SVGとの連携

SVGは素晴らしく連携が行なえますが、いくつか癖があります。以下ではSVGを使ういくつかの方法を提示しますが、これらはBootstrap Iconsのコードには含まれていません。

報告されている問題は次のとおりです:

Internet Explorerと古いバージョンのEdgeにおいて、SVGがはじめからフォーカスされている。 SVGを埋め込む際に、<svg>要素にfocusable="false"を加えます。詳細のStack Overflowはこちら。
SVGを<img タグで利用している場合、ブラウザのボイスアシスタント機能が画像と発音されず、時々スキップする。 可能な場合にはrole="img"を含めます。詳細の記事はこちら。
Internet Explorerにおいて、外部のSVGスプライトが正しく動作しない。 svg4everybody polyfillが必要です。

他にも問題がありましたか？ぜひIssueを作成して報告してください。