Webページでは、アイコンを配置してデザインに変化を付けたり、ユーザーに分かりやすく内容を伝えたい場合があります。
Bulmaには、アイコンを配置する際に使用するためのクラスが用意されています。
今回は、アイコンを配置する際に使用するiconクラスについて紹介します。
様々なアイコンフォントライブラリを配置するiconクラス
Bulmaは、Font Awesome 5、Font Awesome 4、Material Design Icons、Ioniconsなどのすべてのアイコンフォントライブラリと互換性があります。
iconクラスはアイコンフォントライブラリから提供されているアイコンを配置する際のコンテナとして機能します。
以下のようにiconクラスを指定した要素内にアイコンフォントライブラリのアイコンのタグ（HTML）を配置します。
HTML
|
1 2 3 |
<span class="icon"> <i class="fas fa-home"></i> </span> |
ブラウザーでの表示
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Home --> <span class="icon"> <i class="fas fa-home"></i> </span> <!-- Menu --> <span class="icon"> <i class="fas fa-bars"></i> </span> <!-- Top --> <span class="icon"> <i class="fas fa-caret-square-up"></i> </span> |
ブラウザーでの表示
テキストを配置する
アイコンと一緒にテキストを配置する際は、icon-textクラスを利用することができます。
icon-textクラスはiconクラスを指定する要素の親要素に指定します。
|
1 2 3 4 5 |
<span class="icon-text"> <span class="icon"> <i class="fas fa-home"></i> </span> </span> |
テキストを配置する場合は、アイコンと同じ階層にspan要素で囲って配置します。
|
1 2 3 4 5 6 |
<span class="icon-text"> <span class="icon"> <i class="fas fa-home"></i> </span> <span>Home</span> </span> |
アイコンとテキストを配置すると、以下のように表示されます。
内部のすべてのテキストがspan要素でラップされている限り、icon-textクラスを指定した親要素（ラッパー）を使用して、アイコンとテキストを組み合わせることができます。
アイコンとテキストを繰り返し表示することも可能です。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<span class="icon-text"> <span class="icon"> <i class="fas fa-home"></i> </span> <span>東京</span> <span class="icon"> <i class="fas fa-arrow-right"></i> </span> <span class="icon"> <i class="fas fa-train"></i> </span> <span class="icon"> <i class="fas fa-arrow-right"></i> </span> <span>名古屋</span> <span class="icon"> <i class="fas fa-arrow-right"></i> </span> <span class="icon"> <i class="fas fa-train"></i> </span> <span class="icon"> <i class="fas fa-arrow-right"></i> </span> <span>京都</span> <span class="icon"> <i class="fas fa-arrow-right"></i> </span> <span class="icon"> <i class="fas fa-train"></i> </span> <span class="icon"> <i class="fas fa-arrow-right"></i> </span> <span>新大阪</span> <span class="icon"> <i class="fas fa-flag-checkered"></i> </span> </span> |
icon-textクラスを指定する要素をdiv要素にすることで、フレキシブルな配置をすることも可能です。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div class="icon-text"> <span class="icon"> <i class="fas fa-info-circle"></i> </span> <span>情報</span> </div> <p class="block"> ファイルのダウンロードを開始します。 </p> <div class="icon-text"> <span class="icon"> <i class="fas fa-check-square"></i> </span> <span>成功</span> </div> <p class="block"> ファイルのダウンロードが完了しました。 </p> <div class="icon-text"> <span class="icon"> <i class="fas fa-exclamation-triangle"></i> </span> <span>警告</span> </div> <p class="block"> ファイルが破損している可能性があります。 </p> <div class="icon-text"> <span class="icon"> <i class="fas fa-ban"></i> </span> <span>危険</span> </div> <p class="block"> ファイルのダウンロードに失敗しました。 </p> |
アイコンの色
アイコンのフォントはテキストであるため、Bulmaに定義されているカラーヘルパークラスを使用してアイコンの色を変更することができます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="icon has-text-info"> <i class="fas fa-info-circle"></i> </span> <span class="icon has-text-success"> <i class="fas fa-check-square"></i> </span> <span class="icon has-text-warning"> <i class="fas fa-exclamation-triangle"></i> </span> <span class="icon has-text-danger"> <i class="fas fa-ban"></i> </span> |
テキストを配置したアイコン（icon-text）でも同様に色を変更することができます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="icon-text has-text-info"> <span class="icon"> <i class="fas fa-info-circle"></i> </span> <span>Info: 情報</span> </div> <div class="icon-text has-text-success"> <span class="icon"> <i class="fas fa-check-square"></i> </span> <span>Success: 成功</span> </div> <div class="icon-text has-text-warning"> <span class="icon"> <i class="fas fa-exclamation-triangle"></i> </span> <span>Warning: 警告</span> </div> <div class="icon-text has-text-danger"> <span class="icon"> <i class="fas fa-ban"></i> </span> <span>Danger: 危険</span> </div> |
