HTMLコーディング

便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

今回はWebフォント「Font Awesome」の使い方を紹介します。
Font Awesomeとは、Web上でアイコンをフォントとして利用できるWebフォントで、そのためcssでカラーやサイズを調整することも可能です。
僕も去年Font Awesomeの存在を知りましたが、とても使いやすくアイコンの種類も豊富で今ではコーディングに欠かせない存在となっています。

まずはダウンロードからの手順をご説明します。

まずはWebサイトからダウンロード
下記リンクURLからFont Awesomeのサイトにアクセスし、メインビジュアルの『Download』をクリック。
20160913_img02

ウィンドウが表示されましたら、「No thanks, just download Font Awesome」のボタンをクリックするとダウンロードが開始されます。
20160913_img01

「font-awesome.min.css」をHTMLファイル内に設定
ダウンロード完了後、『css』フォルダの中にあるcssファイルを任意のHTMLフォルダにコピーし、head内に下記のように貼り付けます。

<head>
<link href="css/font-awesome.min.css" rel="stylesheet">
/*CDNサーバ上のファイルを読み込ませる事も可能です*/
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>

またFont Awesomeの使い方は2つあり、直接HTML内にタグを張る方法とcssで『:before,:after』を使って背景として使う方法があり、下記から2つの方法をご説明致します。

直接HTML内にタグを張り付ける場合

至ってシンプルな方法です。任意の場所に、

<p><i class="fa fa-calendar" aria-hidden="true"></i> 2016.09.13</p>

◆実際にWeb上で見てみると

2016.09.13

このように簡単にアイコンが表示されます。

cssで表示させる場合

cssでアイコンを表示させる場合は、「before」または「after」を使用します。
手順は以下の通りです。

<p id="calendar">2016.09.13</p>
#calendar:before {
font-family: "FontAwesome";
/*表示させたいアイコンのユニコードを入力*/
content: "\f073";
padding-right: 5px;
}

アイコンのユニコードは詳細ページの下図に記載されています。
20160913_img03

◆実際にWeb上で見てみると

2016.09.13

この方法ならアイコンのみサイズを大きくする事も可能ですので、微調整をするならcssが断然お勧めです。
また、複数のアイコンを表示させる場合は、予めbodyタグに「font-family: “FontAwesome”;」書いておくと便利です。

body {
font-family: ~省略~, sans-serif , "FontAwesome";
}

※「before疑似要素」はIE7・IE6に対応していないので注意が必要です。

以上がFont Awesomeの基本的な使い方です。
500種類以上のアイコンを表示できますので、わざわざアイコン画像を用意する手間も省けるので是非お試しください。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  2. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

  3. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  4. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  5. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法

    テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。・・・前はそんな、毎週飲むとか、なかったンデスヨ…

  6. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう

    寒い!((((;゚Д゚))))寒すぎてロードバイク諦めかけてるともさんです、こんにちわ。EC-CUBE3のテスト環境を作りたくて、どこに作…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方
  2. レポート

    グリコードを使ってプログラミングを学んでみた!
  3. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
  4. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールして…
  5. WEB集客

    Googleアナリティクスで目標設定とABテストをしてみよう
PAGE TOP