【Bootstrap入門】おしゃれな画面を作るためのアイコンの使い方とは?

皆さんは、Bootstrapを使ったことがありますか?WEBアプリ・WEBサービスなどの画面を作るときに、Bootstrapの使い方を知っているととても便利です。

なかでも、アイコンの使い方を覚えておくと、手軽におしゃれなデザインを使うことができるのでおすすめです!そこで今回は、

  • Bootstrap3でアイコンを使う方法
  • Bootstrap4でアイコンを使う方法
  • アイコンとあわせて覚えると便利なボタンの作り方

といった基礎的なことから、といった応用的な方法まで、徹底的に解説します!

Bootstrapでアイコンを使う方法とは?

はじめに、Bootstrapでアイコンを使う方法について解説します。Bootstrap3とBootstrap4で方法違うため、それぞれ解説しますね。

Bootstrap3の場合

まず、Bootstrap3でアイコンを使う方法について解説します。Bootstrap3では、spanタグにclass名を指定するだけで、簡単にアイコンを使うことができます。

使い方:

たとえば、時計のアイコンを使う場合は、次のように書きます。

時計のアイコンを使う方法:

アイコン:

Bootstrap3で使えるアイコンのクラス一覧は、以下で確認できます。

Bootstrap3をつかっている場合は、classの指定だけですぐに使えるので、覚えておくと便利です!

Bootstrap4の場合

次に、Bootstrap4でアイコンを使う方法について解説します。Bootstrap3とは異なり、単純にクラス名を指定するだけではアイコンは使えません。そのため、外部のアイコンを用意する流れとなります。

無料で1000種類以上のアイコンが使えるFont Awesomeが、Bootstrap3で使えるglyphiconと使い方も似ているので、こちらを使うのがおすすめです!使い方を詳しく解説しますね。

「Font Awesome」をHTMLに読み込む方法

まず、「Font Awesome」をHTMLに読み込む方法について解説します。最新版のFont Awesomeを読み込む方法は、次のとおりです。

1. Font Awesome公式ページの「How to Use」を開き、コードをコピー

引用元:Font Awesome https://fontawesome.com/start

2. HTMLのheadタグに、コードを入れる
これだけで、簡単に「Font Awesome」のアイコンを使う準備ができました。

「Font Awesome」の使い方

次に、「Font Awesome」の使い方について解説します。使い方は次のとおりです。

1. 「Font Awesome」のiconsページから使うアイコンをクリックし、左側のFreeeをクリック


※無料で使えるアイコンの中から選択するためです。

2. 検索して使いたいアイコンを調べ、使うアイコンをクリック

3. アイコン詳細画面の上にある、HTMLコードをクリック

これで、アイコンを使うためのHTMLコードがコピーできました。あとは、HTMLの使いたい場所にコピペするだけで、簡単にアイコンを使うことができます!

Bootstrap4でアイコンを使った画面のサンプルコード

最後に、具体的なサンプルをもとに、詳しい使い方を解説します!

サンプルコード:

実行結果:

データ登録、データ検索、データ一覧、データ出力などアプリ開発でよく使う機能にアイコンを付けたサンプルです。このように、簡単にアイコンを表示することができます。

headタグに1行font awasomeを使うためのコードを入れるだけで、インストールしなくても簡単に使えるので、覚えておくと便利です!

ボタンの使い方と組み合わせてより魅力的な画面に

サンプルのように機能名にアイコンを付ける場合以外にも、ボタンにアイコンを付けるのがおすすめです!たとえば、次のように見やすいボタンを作ることができます。

サンプルコード:

実行結果:

ボタンと組み合わせることで、使い勝手が良いおしゃれな画面を作ることができるので、使い方を覚えておくと便利です!Bootstrapでお手軽にボタンを作る方法については以下で詳しく解説しているので、気になる方は見てみてくださいね!

【Bootstrap超入門】ボタンの種類・使い方について徹底解説!
更新日 : 2019年7月7日

まとめ

今回は、bootstrapでアイコンを使う方法を解説しました。Bootstrap3、4でそれぞれ使い方が違いますが、どちらでも使える「Font Awesome」の使い方を覚えておくのがおすすめです!使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説