ボタンにFont Awesomeのアイコンを表示(設定)する [CSSフレームワーク Bulma]

Bulma ロゴ トップ バナー

Bulmaのbuttonクラスで作成するボタンでは、Font Awesomeで提供されているアイコンを埋め込むこともできます。

本記事では、BulmaのボタンにFont Awesomeのアイコンを配置する方法について紹介します。

Bulmaのボタン作成の基本については、以下の記事を参照してください。

CSSフレームワーク Bulmaのボタン Button
Webフォームのデザインでは、ボタンは欠かせない要素です。 ユーザーに何らかの動作を確定、またはキャンセルさせるためにはボタン...

Font Awesomeを利用してボタンにアイコンを配置する

Font Awesomeのアイコンを利用する場合は、CDNを利用するなどしてFont AwesomeのCSSを参照する必要があります。

アイコン付きボタン

ボタンのアイコンは、ボタンとする要素の子要素として配置します。

Bulmaのbuttonクラスでアイコン付きのボタンを表現したサンプルのブラウザーでの実行結果

HTML

ボタンにテキストを表示する場合は、アイコンとは別のspan要素を配置します。

Bulmaでアイコンを配置する方法については、以下の記事に記載していますので、合わせてご確認ください。

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

アイコン付きボタンの作成例

以下にアイコンを持つボタンの作成例をいくつか示します。

ページのトップへ移動するボタン

ここでは、ページのトップへ移動する(戻る)ボタンを作成します。

Bulmaアイコン付きボタン作成例のブラウザーでの表示

HTML

SNSボタン

ここでは、Twitter、Fasebook、LINEのSNSボタンを作成します。

Bulmaカラーアイコンボタン作成例のブラウザーでの表示

HTML

SNSの種類を表すために、Font Awesomeのアイコンを利用しています。
それぞれのボタンのアイコンは見やすくするために、Font Awesomeのクラスのfa-2xを指定して少しアイコンを大きくしています。

補足

フリーで使用できるFont Awesomeのアイコンは、以下の記事でご紹介しています。

Font Awesome アイコンフォント一覧 [Free (フリー) のみ]
Font Awesomeのアイコンフォントの一覧です。 Free(無償で利用可能)のアイコンのみをリストにまとめました。 F...

Bulma 入門 Tips 一覧