CSSフレームワーク Bulmaのアイコン Icon

Bulma ロゴ トップ バナー

Webページでは、アイコンを配置してデザインに変化を付けたり、ユーザーに分かりやすく内容を伝えたい場合があります。

Bulmaには、アイコンを配置する際に使用するためのクラスが用意されています。

今回は、アイコンを配置する際に使用するiconクラスについて紹介します。

様々なアイコンフォントライブラリを配置するiconクラス

Bulmaは、Font Awesome 5、Font Awesome 4、Material Design Icons、Ioniconsなどのすべてのアイコンフォントライブラリと互換性があります。

iconクラスはアイコンフォントライブラリから提供されているアイコンを配置する際のコンテナとして機能します。

以下のようにiconクラスを指定した要素内にアイコンフォントライブラリのアイコンのタグ(HTML)を配置します。

HTML

ブラウザーでの表示

Bulmaのiconクラスで配置したアイコンのブラウザーでの表示結果

HTML

ブラウザーでの表示

Bulmaのiconクラスで配置したアイコンのブラウザーでの表示結果

テキストを配置する

アイコンと一緒にテキストを配置する際は、icon-textクラスを利用することができます。

icon-textクラスはiconクラスを指定する要素の親要素に指定します。

テキストを配置する場合は、アイコンと同じ階層にspan要素で囲って配置します。

アイコンとテキストを配置すると、以下のように表示されます。

Bulmaのiconクラスで配置したアイコンとテキストのブラウザーでの表示結果

内部のすべてのテキストがspan要素でラップされている限り、icon-textクラスを指定した親要素(ラッパー)を使用して、アイコンとテキストを組み合わせることができます。

アイコンとテキストを繰り返し表示することも可能です。

Bulmaのiconクラスで配置したアイコンとテキストのブラウザーでの表示結果

HTML

icon-textクラスを指定する要素をdiv要素にすることで、フレキシブルな配置をすることも可能です。

Bulmaのiconクラスで配置したアイコンとテキストのブラウザーでの表示結果

HTML

アイコンの色

アイコンのフォントはテキストであるため、Bulmaに定義されているカラーヘルパークラスを使用してアイコンの色を変更することができます。

Bulmaのiconクラスで配置したカラーアイコンのブラウザーでの表示結果

HTML

テキストを配置したアイコン(icon-text)でも同様に色を変更することができます。

Bulmaのiconクラスで配置した色を変更したアイコンとテキストのブラウザーでの表示結果

HTML

Bulma 入門 Tips 一覧