アイコン(ICON)の使い方(Iconic を使った方法) : Bootstrap 4

Bootstrap は、Web サイトや Web アプリケーションを作成するときに便利なフレームワークです。

さらに、Bootstrap のアイコン(ICON)の使い方を知っていると、サイトをよりおしゃれなデザインにすることも可能です。

本記事では、Bootstrap 4でのアイコンの使い方について解説します。

▼Bootstrap 4については、こちらの記事で概要を解説しています。
https://knowledge.cpi.ad.jp/tech/top-1/

 

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

Bootstrap 4でアイコンを使う方法

Bootstrap 3では、span タグに class 名を指定するだけでアイコンを使うことができました。

しかし、Bootstrap 4ではアイコンがバンドルされていません。そのため、外部のサイトなどを使ってアイコンを用意する必要があります。

公式サイトでは下記サイトのアイコンをテストし、おすすめしています。

本記事では「 Iconic 」を使った方法を紹介します。

Iconic を使ってアイコンを利用する方法

1. Iconicサイトにアクセスし、使用したいアイコンファイルをダウンロードして解凍します。

出典:Iconic

> Iconicダウンロードページ
 

2. ダウンロードしたファイルを解凍すると、下記のディレクトリが展開されます。

 

3. 「font」ディレクトリを、Bootstrapのディレクトリにコピーします。
 

4. cssファイルを読み込みます。

<link href="/font/css/open-iconic-bootstrap.css" rel="stylesheet">

5. アイコンを挿入

<span class="oi oi-icon-name"
  title="icon name" aria-hidden="true"></span>

6. Icon nameはIconicのページより確認することができます。

フォントとしてアイコンが利用できるので、とても便利ですね

アイコンを使っておしゃれなサイトを作ってみよう!

Bootstrap 4でアイコンを使う方法を解説しました。アイコンを使うだけでサイトの雰囲気が変わり、おしゃれでクオリティの高いものに仕上げることも可能です。

本記事の内容を参考に、アイコンを使ってみてください。

関連タグ:

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ