Bootstrap は、Web サイトや Web アプリケーションを作成するときに便利なフレームワークです。
さらに、Bootstrap のアイコン (ICON) の使い方を知っていると、サイトをよりおしゃれなデザインにすることも可能です。
本記事では、Bootstrap 4 でのアイコンの使い方について解説します。
Bootstrap 4 については、こちらの記事で概要を解説しています。
▼Bootstrap 4 とは
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
Bootstrap 4 でアイコン (Icon) を使う方法
Bootstrap 3 では、span タグに class 名を指定するだけでアイコンを使うことができました。
しかし、Bootstrap 4 ではアイコンがバンドルされていません。そのため、外部のサイトなどを使ってアイコンを用意する必要があります。
公式サイトでは下記サイトのアイコンをテストし、おすすめしています。
本記事では「 Iconic 」を使った方法を紹介します。
Iconic を使ってアイコンを利用する方法
１. Iconic サイトにアクセスし、使用したいアイコンファイルをダウンロードして解凍します。
出典：Iconic
２. ダウンロードしたファイルを解凍すると、下記のディレクトリが展開されます。
３. 「 font 」ディレクトリを、Bootstrap のディレクトリにコピーします。
４. css ファイルを読み込みます。
<link href="/font/css/open-iconic-bootstrap.css" rel="stylesheet">
５. アイコンを挿入
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
６. Icon name は Iconic のページより確認することができます。
フォントとしてアイコンが利用できるので、とても便利ですね。
アイコンを使っておしゃれなサイトを作ってみよう！
Bootstrap 4 でアイコンを使う方法を解説しました。アイコンを使うだけでサイトの雰囲気が変わり、おしゃれでクオリティの高いものに仕上げることも可能です。
本記事の内容を参考に、アイコンを使ってみてください。
