神戸 大阪 宝塚 ホームぺージ制作会社

Font Awesomeの使い方【WEBアイコンを使ってみよう】

2018/07/20

この記事の投稿者

後藤(弟)

こんばんは

Laf Design の後藤(弟)です。

今回は『Font Awesomeの使い方【WEBアイコンフォントを使ってみよう】』についてご紹介したいと思います。

ホームページやブログなどで「アイコン」を表示しようと思えば通常は、jpegpngなどで画像(アイコン)を作成して、それを張り付けて表示させていましたが、このFont Awesomeを使えば、いちいち画像(アイコン)を作成しなくても簡単にアイコンを表示することができます。

 Font Awesomeとは?

Font Awesome(フォントアウェサム)とは、ホームページやブログで、Webアイコンフォントを表示できるサービスのことです。

そもそもアイコンフォントとは?

「フォント」というと、文字も書体や大きさなどを決めた文字の集まりのことで、

日本語でいうと。メイリオ、MSゴシック、MS明朝などがあります。

では「アイコンフォント」はというと、アイコンを文字もように表示できるフォントのことです。

フォントと同じように拡大や縮小をしても、文字がぼやけたりせず、色やサイズも簡単に変更することができます。

 Font Awesomeの準備

方法1 CDNを使う

下記のコードをコピーして、headタグ内に貼り付けてください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

CDNとは「Content Delivery Network」の略で、専用のサーバー上にあるデータを読み込んで、自分のサイトに表示させる仕組みです。
このCDNを使うことで自分のサーバーにアップロードしなくても使うことができます。

方法2 サーバーにデータをアップロード

自分のサーバーにアップロードして使う方法ですが、

長くなりそうなので、下記のサイトを参考にしてください。

フォントアイコンの使い方

 Font Awesomeの使い方

手順1:Font Awesomeのサイトへ行く

まずFont Awesomeのサイト」から上のメニューのIconsをクリック

手順2:使いたいアイコンフォントを探す

使いたいアイコンをクリックします。

薄くなっているアイコンは、PRO(有料)プランでのみ使うことができます。

個人的には無料でもかなりのアイコンがあるので十分かなと思います。

手順3:アイコンフォントのコードをコピー

<i class="fab fa-apple"></i>

今回は試しにリンゴのアイコンにしてみました。

手順3:表示したいサイトに貼り付ける

<i class="fab fa-apple"></i>  ⇒ 

こんな感じですね。

まとめ

いかがでしたでしょうか?

今回は『Font Awesomeの使い方【WEBアイコンを使ってみよう】』についてご紹介させていただきました。

WEBアイコンを利用すると簡単にアイコンがホームページやブログに表示できるので、とっても便利ですね。

是非活用してみてはいかがでしょうか。

参考サイト : 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう(サルワカ)

いつも長々とお読みいただきありがとうござます。

店舗・集客・ ホームページ制作はお任せ!

国内全国対応、宝塚、西宮、神戸周辺のお客様大歓迎!!

お気軽にお問い合わせください。

ラフデザインのサービス一覧

  • ホームページ制作新規サイト・リニューアル・Wordpressを利用したホームぺージ制作に関する業務を行います
  • スマホサイト制作スマホやタブレットなどの各端末に対応したホームページ制作を行います
  • ホームページ制作採用サイトや採用動画の制作などの、採用サポートは当社の強みの一つでです。
  • ホームページ制作GoogleやYahoo!などの広告やSNS運用支援など幅広くWebプロモーションを行っています。
  • ホームページ制作パンフレットやチラシなどの印刷物のデザインからご納品まで当社にお任せください。
  • ホームページ制作検索結果で上位に表示するための的確なアドバイスとサポートを行います。
  • ホームページ制作ドメイン・サーバーの管理や、サイトの運用・更新方法などを幅広くサポートします。
  • ホームページ制作採用向けや会社のご紹介向けのなどの動画制作も承っております。

アーカイブ

CONTACT
お問い合わせ

お気軽にお問い合わせください。
ホームぺージ制作・スマホサイト制作・採用サイト制作・採用コンサルティング

move_top