「Bootstrap Iconsの特徴と使い方：シンプルで使いやすいWebアイコンの魅力」【コードサンプル付き】│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り
BLOG
開発者ブログ

「Bootstrap Iconsの特徴と使い方：シンプルで使いやすいWebアイコンの魅力」【コードサンプル付き】

「Bootstrap Icons」の特徴と使い方を解説します！
最後には、ちょっとしたカスタマイズ方法も教えちゃいます！

こんにちは。
デザイナーのHIROです。

Bootstrap Iconsは使ってますか？
わたしは以前はFont Awesomeばかり使っていましたが、Bootstrap Iconsのバージョンが上がりなかなか使いやすくなっていたので、直近では使用するようになってきました。

本日は、そんなBootstrap Iconsの特徴や使い方を詳しく解説します。

それでは行ってみましょう！！

Bootstrap Iconsとは

Bootstrap Iconsは、Bootstrapチームが提供する完全無料で高品質なオープンソースのアイコンセットで、最新バージョンでは1,800種類以上のアイコンが揃っています。

Bootstrapフレームワークと一貫性があるため、Bootstrapプロジェクトと特に相性が良く、ユーザーインターフェース（UI）の質を手軽に向上させることができます。

Bootstrap Iconsの特徴

豊富なアイコン数
最新バージョンでは1,800種類以上のアイコンを提供しており、ビジネス、SNS、ナビゲーションなど、さまざまな場面で使用可能です。

SVG形式での提供
Bootstrap IconsはSVG形式を採用しているため、アイコンのサイズ調整や色の変更が自由自在。どの画面サイズでも鮮明に表示され、デザインの柔軟性を保ちつつ、パフォーマンスも最適化されています。

シンプルな導入方法
CDNリンクを使用して、数行のコードを追加するだけで手軽に利用可能。プロジェクトに応じて、特定のアイコンだけをダウンロードして使用することもでき、リソースの節約ができます。

軽量で高速な読み込み
ページのパフォーマンスにほとんど影響を与えない軽量設計。読み込みが速いため、SEOやユーザーエクスペリエンスの向上にもつながります。

デザイン段階でBootstrap Iconsの使う方法

Photoshopなどで使うケース

非公式だと思いますが、PhotoshopやIllustratorなどでアイコンを使う場合は、お使いのパソコンにアイコンをインストールする必要があります。フォントデータのダウンロードはこちらより行えます。

Bootstrap IconsのGitHubにアクセス

まずは、Bootstrap IconのGitHubにアクセスして、ページ最下部まで移動します。
次に、以下画像の赤枠の箇所「Bootstrap-icons-1.11.3.zip」をクリックして、データをダウンロードします。

Information

今回紹介している記事ではバージョン1.11.3ですが、最新バージョンをダウンロードください。

最新バージョンはこちら

フォントのインストール

先ほどダウンロードした「Bootstrap-icons-1.11.3.zip」を解凍したら、/Bootstrap-icons-1.11.3/font/fonts/に移動して「bootstrap-icons.woff」を探します。

次に、TTFからWOFFへのコンバーターにアクセスし、「bootstrap-icons.woff」を「bootstrap-icons.ttf」に変換します。

変換とダウンロードを終えたら、bootstrap-icons.ttfをパソコンにインストールします。

Photoshop等でアイコンを呼び出す方法

Windowsの場合、スタートメニュー / Windowsアクセサリ / より文字コード表を開きます。

文字コード表の中から使いたいアイコンを探してPhotoshop等のペーストし、ペーストしたアイコンに対してBootstrap-iconsフォントを指定すれば表示されます。

う～ん…微妙…(-_-;)
Font Awesomeのように手軽に検索できて、手軽にグラフィックソフトで使えるようになったら良いのにね。
需要があれば、コピペで使えるようなアプリを作ってみようかな。。。

Figmaで使う方法

Figmaでアイコンを使う方法は、こちらからFigmaを開いていただければアイコン一覧が表示されるので、そこから利用可能です。

正直、こっちも微妙…ww

コーディングでBootstrap Iconsを使う

コーディングでBootstrap Iconsを使うにはいくつか方法があります。
代表的なところとして、以下はスタイルシートファイルを読み込む方法です。

１. <head> タグでスタイルシートを読み込んで使う方法

最も簡単な方法は、CDN（コンテンツ配信ネットワーク）を利用して、HTMLファイルの<head>タグ内にスタイルシートを直接読み込むことです。
公式のCDNリンクを使うと、外部リソースとしてアイコンが利用できるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Icons Example</title>
    <!-- Bootstrap IconsのCDNリンクを読み込む -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
    <!-- アイコンを使用する -->
    <i class="bi bi-alarm"></i> <!-- 時計アイコン -->
</body>
</html>

上記のコードでは、CDNリンクを読み込むことで、<i class="bi bi-アイコン名"></i>の形で簡単にアイコンが使えるようになります。

サンプル

２. @importでスタイルシートを読み込む方法

/* style.css */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');

/* これで、HTML内でBootstrap Iconsが使用可能になります */

読み込んだCSSファイルをHTMLにリンクしておくことで、ページ全体でアイコンが使用できるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Icons Example</title>
    <!-- 自作のCSSファイルを読み込む -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- アイコンを使用する -->
    <i class="bi bi-heart"></i> <!-- ハートアイコン -->
</body>
</html>
サンプル

３.HTMLに直接SVGコードを埋め込む方法

公式サイト（Bootstrap Icons）からアイコンのSVGコードをコピーし、HTMLに直接貼り付けて使用することができます。各アイコンのページで、SVGのコードを表示・コピーできるオプションがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Icons Example</title>
    <!-- 自作のCSSファイルを読み込む -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- バケツを使用する -->
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bucket-fill" viewBox="0 0 16 16">
  <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5m1.005 0a4.5 4.5 0 0 1 8.945 0z"/>
</svg>
</body>
</html>
サンプル

４.SVGスプライトで読み込む方法

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

また、svgスプライトを使う場合、必要なアイコンを必要なだけダウンロードしてサイトに読み込むので、一般的なホームページ制作においては番高速なBootstrap Iconsの使い方になると思います。

<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スプライトの詳しい使用方法は以下を参照ください。

Web制作で何かと便利なSVG。symbolタグを使った書き出し方法を解説！PHPを使った関数化も合わせて紹介!

【SVGスプライト】SVGをsymbolタグを使って画像書き出そう！

Web制作で何かと便利なSVG。symbolタグを使った書き出し方法を解説！PHPを使った関数化も合わせて紹介!

５.画像として読み込む方法

最後に紹介するのは、画像として読み込む方法です。

こちらは、Bootstrap Iconsのサイトから必要なアイコンをSVG形式でダウンロードし、FTPでサーバーにアップロードした後に、一般的な画像の読み込み方法と同様に使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Icons Example</title>
    <!-- 自作のCSSファイルを読み込む -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Bootstrapのロゴを使用する -->
    <img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">
</body>
</html>

アイコンの選択方法

アイコンの導入方法が分ったところで、実際にアイコンをどのように使用するかを解説します。

Bootstrap Iconsの公式サイトにアクセスすると、たくさんのアイコンが並んでいます。
使いたいアイコンが見つかったら、そのアイコンをクリックすると詳細ページへと移動します。

１.スタイルシートを読み込んでいる場合

スタイルシートを読み込んでアイコンを使う場合は、以下のコードを利用します。

２.SVGを直接埋め込む場合

HTMLにアイコンを直接埋め込んで使う場合は、HTMLをコピーの箇所から使いたいSVGコードをコピーし、HTMLにペーストして使えます。

３.画像またはsvgスプライトで読み込む方法

その他の使い方は、HTMLをコピーの箇所にあるSVGコードを利用します。
画像として読み込む場合、svgスプライトとして読み込む場合は、こちらでダウンロードしたファイルにすべてのsvgデータが含まれています。

また、公式サイトからも、アイコン毎にSVGがダウンロードできます。

SVGアイコンを使うときの注意点

SVGアイコンを使う際の注意点もあります。

アイコンが意味を持つ場合、視覚に頼らないユーザーにも伝わるようにアクセシビリティ対応が重要です。以下の方法で、SVGアイコンをスクリーンリーダーに読み上げさせたり、隠したりできます。

タイトルや説明の追加
SVG内に<title>タグや<desc>タグを加えることで、スクリーンリーダーに説明を追加できます。

<svg width="32" height="32" role="img" aria-labelledby="iconTitle">
    <title id="iconTitle">検索アイコン</title>
    <path d="..." />
</svg>

視覚的な意味がない場合は隠す
デコレーション用のアイコンは、aria-hidden="true"を追加してスクリーンリーダーから除外します。

<svg width="32" height="32" aria-hidden="true">
    <path d="..." />
</svg>

画像として読み込む場合のalt属性
デコレーション用のアイコンは、alt=””のようにalt属性を空にすることでスクリーンリーダーに読み込まれなくなります。

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

アイコンに重要な視覚的役割がある場合
role="img"を指定することで、その画像が視覚的な意味を持つものであることを示します。この属性は、スクリーンリーダーに「この画像は単なる装飾ではなく、重要な意味を持っている」と認識させるのに役立ちます。

<img src="/assets/icons/icon.svg" alt="検索アイコン" width="32" height="32" role="img">

より詳細な説明が必要な場合
aria-labelledbyやaria-describedbyを使って、画像に関連するタイトルや説明を提供することができます。
これにより、スクリーンリーダーはアイコンに関する追加情報を提供できます。

  • aria-labelledby: アイコンに関連するタイトルを指定する場合に使用します。
  • aria-describedby: アイコンに関する追加の説明や詳細を提供する場合に使用します。
<!-- `aria-labelledby`を使用する例 -->
<img src="path/to/icon.svg" alt="" id="searchIcon" aria-labelledby="iconTitle" width="32" height="32">
<span id="iconTitle">検索アイコン</span>

<!-- `aria-describedby`を使用する例 -->
<img src="path/to/icon.svg" alt="" id="infoIcon" aria-describedby="iconDesc" width="32" height="32">
<span id="iconDesc">このアイコンは検索機能を示します</span>

まとめ

Bootstrap IconsやSVGアイコンは、視覚的な魅力を提供しつつ、レスポンシブデザインにも適した選択肢です。しかし、アクセシビリティを確保するために、適切なHTML属性を使い、スクリーンリーダーを利用するユーザーにも情報を届けられるように配慮することが大切です。

これらのベストプラクティスを実践することで、視覚に依存しないすべてのユーザーに対して使いやすく、アクセス可能なウェブコンテンツを提供できます。

Webに関するお問い合わせ

Web制作やその他のWeb関連のお問い合わせやご相談は、こちらからどうぞ。

Webに関するお問い合わせ
Bootstrap 4からBootstrap 5の主な変更点と、導入時に押さえておきたいポイントをまとめました。

Bootstrap 5とBootstrap 4の主要変更点を比較

Bootstrap 4からBootstrap 5の主な変更点と、導入時に押さえておきたいポイントをまとめました。
Bootstrap 5を使ったモーダルの実装方法。中央表示やスクロール対応、サイズ変更などオプションをサンプルコード付きで紹介!!

Bootstrap5でモーダル実装【コードサンプルあり】

Bootstrap 5を使ったモーダルの実装方法。中央表示やスクロール対応、サイズ変更などオプションをサンプルコード付きで紹介!!
Bootstrap5.3における「アコーディオン」の実装方法と、オプションの実装方法をサンプル付きで紹介いたします。

Bootstrap5でアコーディオン実装【コードサンプルあり】

Bootstrap5.3における「アコーディオン」の実装方法と、オプションの実装方法をサンプル付きで紹介いたします。

ブログ一覧に戻る

LATEST BLOG 最新のブログ

BLOG CATEGORY カテゴリー

BLOG TAG タグ

ARCHIVE アーカイブ

その他のWebデザイン

その他のWebデザインを見る

CONTACT US

お見積りやご相談は、メール又はお電話にてお気軽にご連絡ください。
担当者が丁寧に対応いたします。

無料相談・お見積り