Bootstapアイコンの使用方法を理解する【図解たっぷりBootstrap5入門】 | SkillhubAI（スキルハブエーアイ）

Bootstapアイコンの使用方法を理解する【図解たっぷりBootstrap5入門】

アイコンと使用方法の種類

Bootstrapアイコン

Bootstrapでは、拡張機能のような形で『Bootstrapアイコン』というアイコンライブラリがあります。 これを活用すると、手軽にWebページにシンプルなアイコンを設置することが出来ます。

アイコンについては、ヘッダーナビゲーションの“アイコン”から確認できます。

URL：https://icons.getbootstrap.jp/

アイコンをWebサイトで使う3つの方法

今回はBootstrapのアイコンを使っていくわけですが、その前にWebページにアイコンを表示する方法を簡単に押さえましょう。

というのも、Bootstrapでは3つの方法でアイコンを表示させることが出来るようになっています。 アイコンのページでは、使用可能なアイコンの一覧が表示されていますよね。

file

使いたいアイコンをクリックすると、そのアイコンを使うための方法が載ったページに遷移します。 「この方法で使うなら…」と使い方に応じた記述がされています。 下図1～3、それぞれの違いを把握しておきましょう。

file

1. 画像形式で呼び出す（imgタグ/backgroundプロパティ）

アイコンを表示する1つ目の方法は、画像として扱うことです。 方法は、今まで画像を呼びたしてきたのと同じ。

  • HTMLの場合：imgタグを使って表示する
  • CSSの場合：background もしくは background-imageプロパティを使う
 <img src="images/food1.jpg" alt="">

.test{
  background-image: url('images/a.jpg');
}

画像ファイルでは、jpg、png、gif形式がよく使われていますね。

Bootstrapアイコンでダウンロードできる「SGV」も画像フォーマットの一種。 SVGファイルも、HTML/CSSどちらでも jpg などと同じように使用できます。

 <img src="images/〇〇.svg" alt="">

SVGだと何が良い？

PGNなどの画像ファイルとSVGの違いは、SVGはベクター形式のデータ（ベクターグラフィックス）であるということ。

ベクターグラフィックスは、点とそれを結ぶ直線・曲線で画像を構成し、その描画の方法を記録したもの。 画像を構成する数式が保存されているような状態ですので、拡大・縮小しても画質が荒らくならず、綺麗なことが特徴です。

SGVファイルの詳細は、Adobeの解説が分かりやすいです。

SVGファイルについて | Adobe
https://www.adobe.com/jp/creativecloud/file-types/image/vector/svg-file.html

2. Webアイコンフォント

Webフォントとは、Web経由でフォントデータを読み込んで文字を表示させる仕組みです。 アイコンフォントとは、文字の一種としてアイコンを表示できるようにしたもののことです。

アイコンフォントの特徴は、HTMLやCSSでの制御が簡単なこと。 通常の文字と同じく、CSSのfont-sizeプロパティでサイズを変更したり、colorプロパティで色を変えることが出来ます。

本レッスンでは、こちらのアイコンフォント形式を使用していきます。

3.HTMLに直接コードを書く（SVGタグ）

HTMLで直接コードを書いて描画する方法もあります。 Bootstrapアイコンを使う場合は、基本的にアイコンを表示したい場所にコードを貼り付けるだけです。

file

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
  <path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</svg>
  • svgタグ：画面上で描画するためのキャンバスを作る
  • 描画タグ（rect、circle、pathなど）：図を描画する

<path d=" ">内の記述は「この位置に移動する」「ここから、ここまでを円弧で繋ぐ」のような、描画のためのコマンドです。 一個ずつ手打ちするようなものではありませんので、抜けなくコピペできればOK。

Bootstrapアイコンを使ってみよう

では、実際にBootstrapアイコンを使用してみましょう。

アイコンのインストール（CDN）

Bootstrapアイコン（アイコンフォントタイプ）を使用するには、スタイルシートファイルを読み込む必要があります。

アイコンのページトップにあるリンクから「インストール」をクリックして、移動しましょう。

file

※内部リンクが上手く動かない場合は、右隣の“使い方”からジャンプして少しスクロールアップすると早いです。

↓

file

CDNの欄にある、linkタグの方のコードをコピー。 HTMLファイルの</head>タグの上、BootstrapのCDNコードの近くに貼り付けます。

file

アイコンを選んで貼り付ける

Bootstrapアイコンのページから、使いたいアイコンを探します。

一覧から目視で探しても良いですし、使うものが決まっていれば右上の検索を使っても良いですね。 下図は、SNSのアイコンを探すために「social」と入れてみた場合です。

file

使いたいアイコンをクリックして、詳細ページを開きます。 「アイコンフォント」の見出し下にあるコード（i タグ）をコピー。

file

コピーしたコードを、HTMLファイルに貼り付けます。

file

上書き保存して、ブラウザで確認してみましょう。 アイコンが表示されていれば成功です。

file

アイコンのスタイリング

文字色と文字サイズ

アイコンフォントの場合、通常のテキスト部分と同じようにCSSが効きます。

Bootstrapのtext-**クラスを追加すると、アイコンの色が変更できます。 文字サイズはh1～h6、display-*クラスなどを使うと良いでしょう。 もちろん、自分でCSSを書いても効きますよ。

file

また、直接クラスを指定しなくても、親要素にCSSが設定されていれば継承します。

file

ホバーアクション

Bootstrap5では、マウスオーバー時にアイコンを右に移動するためのクラスも用意されています。 下図のような、ちょっとしたアニメーションがすぐに作れます。

※見やすいよう拡大しています

file

設定方法は、簡単。 アイコンと文字をaタグで囲い、aタグにicon-linkとicon-link-hoverクラスを指定します。

<a class="icon-link icon-link-hover" href="#">
    <i class="bi bi-facebook"></i>FB
</a>

file

リンクテキストの下線を削除したい場合はtext-decoration-noneクラスを加えます。 アイコンと文字の位置（縦方向揃え）がズレているように感じたら、align-items-baselineなどのクラスを使って調整すると良いでしょう。

<a class="icon-link icon-link-hover text-decoration-none align-items-baseline" href="#">
    <i class="bi bi-facebook"></i>FB
</a>

【実習】アイコン使用方法の復習

Bootstapアイコンを使って、以下のようなページを作って下さい。

file

手順

  1. 新規HTMLファイルを作成
  2. Bootstrap（フレームワーク）のCDNと、BootstrapアイコンのCDNコードを貼り付ける
  3. 下記のHTMLをbodyタグ内に貼り付ける
  4. コメントアウト<!-- ★ --> に書かれている内容を設定（3箇所）
<div class="container py-4">
    <h1>
        <!-- ★ここにBootstrap fillのアイコンを入れ、色を灰色に設定して下さい -->
        Bootstrapアイコン
    </h1>
    <p class="lead mt-4">
        アイコンを使ってみる、実習です。
    </p>
</div>
<div class="container py-4">
    <a href="#"><!-- ★class属性を追加し、ボタンデザイン+マウスホバーでアイコン動くようにしてください -->
        詳しく見てみる
        <!-- ★ここにArrow rightのアイコンを入れます -->
    </a>
</div>
前のレッスン 次のレッスン
レッスン一覧へ