Bootstrapでアイコン付きボタンを作る方法を解説！

BootstrapにはGlyphiconsというアイコンが用意されていて、簡単に見栄えの良いアイコンを簡単に使うことができます。
この記事では、アイコン付きのボタンを作るやり方を説明します。

※注意
この方法はBootstrap3まで使用することができます。
Bootstrap4以降で使えるアイコン使用の方法も記事の後半で紹介しているので、自分のバージョンに合わせたやり方を確認してください。

Bootstrapでアイコン付きボタンを作るには、下記のコードを利用します。

span要素を作り、class属性にglypiconとglypicon-アイコン名を適用させます。このspan要素自体がアイコンの画像として表示される部分になります。

アイコン名の部分には、使いたいアイコンのアイコン名を入れるようにします。

このアイコン名というのはBootstrapで既に決まっていて、使えるデザインと名前の組み合わせは公式サイトで確認することができます。

その次のaria-hiddenというのは「読み上げスキップ機能」で、ページ中の文章を読み上げる時にスキップするための属性になります。

これを記述するかしないかでページの見た目は変わりませんが、より分かりやすく情報を伝えることが出来ます。

例えば、ダウンロードのボタンを作る時にアイコンを使いたいとします。
その場合は以下のように記述するとアイコンを使用できます。

これを使用してボタンを作成すると、次のようになります。

文字とアイコンを組み合わせたいときもあると思います。
その場合も難しく考える必要はありません。以下のコードのように、アイコンを記述した後にそのまま文字を記述すれば作成することができます。

スマートフォンなどで絵文字を使用する時をイメージしてもらうとわかりやすいと思います。

これを使用してボタンを作成すると、次のようになります。

実は今まで説明してきた機能は残念ながらBootstrap4で廃止され利用できなくなってしまいました。

そのため、Bootstrap4以降のバージョンでは、外部からアイコンデザインを読み込むなどのやり方でアイコン付きボタンを作成していきます。

FontAwesomeというサイトを利用すると、多くのアイコンを利用することができます。
基本の使い方は以下の記事で紹介しています！

FontAwesomeの公式ページでは、使えるアイコンデザインとそのコードを見ることができます。

例えば、ダウンロードのアイコンを使用したい場合は、使いたい位置に以下のコードを記述します。（このコードはFontAwesome公式サイトからコピーできます。）

FontAwesomeのアイコンを使用してボタンを作成するには、以下のようにします。

Githubで使われているアイコン集、OcticonsはGithub上で公開されていて、自由に使うことができます。
使えるデザインは以下のページから確認することができます。

上記のサイトへ移動し、使いたいアイコンを選択します。

画像の下の「Copy SVG」というボタンをクリックするとSVGタグがコピーされます。それをそのままHTMLに貼り付ければ使用することができます。

この画像を使用してボタンを作成すると以下のようになります。

いかがでしたか？このようにアイコンを使ったボタンを作成するとボタンの用途がわかりやすくなり、ページの見やすさにも繋がります。

ぜひ試してみてください！