【Django】bootstrap5のicons（アイコン）の利用：django-bootstrap-icons

Bootstrap5とは

BootstrapはTwitter社が開発したCSSフレームワークの一つで、簡単に見栄えの良いWebサイトを作成できるようにしてくれます。

BootstrapをWebサイト開発で利用することで、開発スピードを格段にアップしますし、メンテナンスも簡単になります。

Bootstrapの最新版はBootstrap5です。今までのBootstrapと比べて以下の特徴があります。

• jQueryに依存しない
• Internet Exploreがサポート外
• Bootstrap Iconsが提供

これら特徴の一つ、Bootstrap Iconsを利用する方法について本記事では解説していきます。

Bootstrap Icons

Bootstrap5からBootstrap Iconsというアイコンライブラリが提供されました。Bootstrap5で最初から使用できるわけでなく、拡張機能的な扱いとなっています。

このアイコンライブラリを利用することで、現代的なアイコンを無料で簡単に使用できます。

Bootstrap Iconsで提供されるアイコン群はSVG画像のため、色をつけることやサイズ変更が柔軟にできます。

django-bootstrap5

django-boostrap5はDjangoで簡単にBootstrap5を利用できるようにしてくれるパッケージです。

Bootstrap Iconsを使うためにも必須のパッケージです。

django-bootstrap5は必ずインストールし、利用できるように各種設定を行っておいてください。

詳しくは以下記事をご参照ください。

【Django】Bootstrap5の利用方法：django-bootstrap5

django-bootstrap-icons

django-bootstrap-iconsはDjangoでbootstrap-iconsを利用できるようにしてくれるパッケージです。

このライブラリはライセンスMITライセンスであり、Python 3.6以上が必要となります。

次項からdjango-bootstrap-iconsの使用方法について解説していきます。

インストール

django-bootstrap-iconsは初めからDjangoにインストールされていないため、pipコマンドでインストールしてください。

pip install django-bootstrap-icons

settings.pyへの追加

settings.pyのINSTALLED_APPSにdjango_bootstrap_iconsを以下のように追加します。

INSTALLED_APPS = [
    …
    'django_bootstrap_icons',
]

すでにここには「django_bootstrap5」が記入されているはずなのでその下にでも追加してください。

カスタムテンプレートタグの読み込み：loadタグ

bootstrap_iconsを利用するすべてのテンプレートに以下コードを記述します。

{% load bootstrap_icons %}

このloadタグによってbootstrap_iconsのカスタムテンプレートタグを読み込みます。

Djangoにおいてテンプレートで使用できるタグは重要な役割を行います。タグについて詳しくわからない方は以下記事をご参照ください。

【Django】テンプレート：タグとは（タグ一覧・使い方）

アイコンの表示

Bootstrap Iconsのアイコンをテンプレートで表示するにはbs_iconタグを使用します。

第一引数には表示したいアイコン名を指定します。アイコン名は以下公式ページの一覧から選びます。

Bootstrap Icons

例えばリンゴマークを表示したい場合は以下のように記述します。

{% bs_icon 'apple' %}

アイコンのサイズを変更

bootstrap-iconsのアイコンのサイズを変更するにはbs_iconタグの引数にsizeを指定します。

例えばアイコン名appleでsizeが1.5emの場合は以下のように指定します。

{% bs_icon 'apple' size='1.5em' %}

アイコンの色を変更

bootstrap-iconsのアイコンの色を変更したい場合はbs_iconタグの引数にcolorを指定します。

例えばアイコン名appleでcolorが赤の場合は以下のように指定します。

{% bs_icon 'apple' color='red' %}

クラスを追加

bootstrap-iconsのアイコンにスタイルを適応させるためにクラスを追加したい場合はextra_classesを指定します。

アイコンの配置（垂直方向）

bootstarp-iconsのアイコンはデフォルトでは中央に配置されます。

もしテキストの横に配置したい場合などでは、中央ではない別の方向に寄せたい場面もあると思います。

そういった中央ではなく、別の方向に寄せたい場合はcssクラスをextra_classesを用いて追加します。

追加するクラスはbootstrap_icons.cssにあるため、head内に以下コードを追記してください。

<link rel="stylesheet" href="{% static 'bootstrap_icons/css/bootstrap_icons.css' %}">

アイコンを寄せたい方向（垂直方向）によって追加するクラスが異なります。以下表を参考にして利用したいクラスを使ってください。