【Django】bootstrap5のicons(アイコン)の利用:django-bootstrap-icons

時計 2022.01.29 / 時計

【Django】bootstrap5のicons(アイコン)の利用:django-bootstrap-icons

本記事ではDjangobootstrap5から提供されたbootstrap iconsの利用方法について解説していきます。

Djangoにはdjango-bootstrap-iconsという便利なパッケージが用意されています。このパッケージを使うことで簡単にbootstrap5のアイコンが利用できます。

本記事を通してbootstrap iconsをDjangoで使えるようになりましょう。

Bootstrap5

Bootstrap5とは

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

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

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

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

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

Bootstrap Icons

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

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

Django:Bootstrap Icons

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

Pythonライブラリ

django-bootstrap5

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

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

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

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

django-bootstrap-icons

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

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

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

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の使用方法

アイコンの表示

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

構文

{% bs_icon 'アイコン名' %}

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

Bootstrap Icons

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

{% bs_icon 'apple' %}

アイコンのサイズを変更

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

構文

{% bs_icon 'アイコン名' size='サイズ' %}

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

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

アイコンの色を変更

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

構文

{% bs_icon 'アイコン名' color='色' %}

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

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

クラスを追加

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

構文

{% bs_icon 'アイコン名' extra_classes='クラス名' %}

アイコンの配置(垂直方向)

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

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

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

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

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

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

クラス名 説明
bi-valign-middle 真ん中に配置。デフォルトの設定値
bi-valign-top アイコンを上に寄せる(vertical-align: top)
bi-valign-bottom アイコンを下に寄せる(vertical-align: bottom)
bi-valign-text-top アイコンを上寄せにする(vertical-align: text-top)
bi-valign-text-bottom アイコンを下寄せにする(vertical-align: text-bottom)
bi-valign-default アイコンにvertical-align: -.125emを追加する

まとめ

本記事「【Django】bootstrap5のicons(アイコン)の利用:django-bootstrap-icons」はいかがでしたか。

bootstrap-iconsを利用することで簡単にWebアプリケーションに視覚的なアクセントを持たせられます。

ぜひどんどん利用してモダンなWebアプリケーションを開発してください。