Font Awesomeの導入方法を紹介します!

css

最近よくみかけるようになったFont Awesomeの導入方法を紹介します。

このページでは、Font Awesomeをダウンロードして導入する方法と、CDN上にあるFont Awesomeを使う方法の2種類について書いていきます。

[スポンサーリンク]

このページでやること

Font Awesomeをダウンロードして導入する方法を紹介します。
CDN上のFont Awesomeを使う方法を紹介します。

Font Awesomeをダウンロードして導入する方法

まずはコチラからFont Awesomeをダウンロードします。
font-awesome-install1

こちらのindex.htmlを作ります。
読込むCSSは、1つだけでOKです。

<!DOCTYPE html>
<html>
    <meta charset="utf-8" content="">
    <title>Font Awesomeの導入方法</title>
    <head>
    	<link href="css/font-awesome.css" rel="stylesheet">
		<meta charset="utf-8">
    </head>
    <body bgcolor="#e2e2e2">
    
	    <i class="fa fa-diamond"></i>

    </body>
</html>

先ほどダウンロードしたFont Awesomeを解凍して、先ほど作ったindex.htmlをそのディレクトリに設置します。
この時、lessとscssディレクトリは不要なので削除しても問題ありません。
cssとfontディレクトリは必ず必要です。
font-awesome-install2

デモ

実行してダイヤモンドのアイコンが表示されればOKです。
こちらにサンプルも用意しておきます。
実際に動かすことが出来ます

CDN上のFont Awesomeを使う方法

こちらは非常に簡単です。
cssを読込む箇所をCDN上のFont Awesomeを指定するのみです。
CDNのリンクはこちらで公開されています。http://www.bootstrapcdn.com/#fontawesome_tab

<!DOCTYPE html>
<html>
    <meta charset="utf-8" content="">
    <title>Font Awesomeの導入方法</title>
    <head>
    	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
		<meta charset="utf-8">
    </head>
    <body bgcolor="#e2e2e2">
    
	    <i class="fa fa-diamond"></i>

    </body>
</html>

さいごに

モジュール管理の観点から私はCDN上のFont Awesomeを使う方をオススメします。

ただしプロジェクトやクライアントの要望次第ではダウンロードする方法も使うこともあると思います。

Font Awesomeはもうメジャーなものだと思いますので、両方の使い方を覚えておいても損はないと思います。両方使えるようにしておきましょう!

それでは!