Pickupニュース

Font Awesome
Webフォント

Font Awesome

スタンダードアイコンWebフォント
Web制作現場においてはスタンダードと言える程広がっているアイコンWebフォント。バージョン4.6.3現在で634アイコンが提供されています。
このページでは、Font AwesomeをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 Font Awesomeの導入
バージョン: 4.6.3をベースにレビューしています。

Font AwesomeをWebサイトで使用するための最初の設定です。

スタイルシートのリンク(ファイルをダウンロードして利用する場合)

Font Awesomeはフォント一式と、フォントファミリーの設定を記述したスタイルシートを読み込んで使用します。

ダウンロード

リンク先のDownloadをクリックして、表示されるポップアップウィンドウでNo thanks, just download Font Awesomeをクリックしてファイルをダウンロードします。

Webサイト

Font Awesomeフォルダの作成

font-awesomeという名前のフォルダを新規作成し、そこにダウンロード・解凍後のfont-awesome-***フォルダの中からcssフォルダfontsフォルダを移動します。

HTMLマークアップ

サーバーに作成したfont-awesomeフォルダをアップロードし、<head>タグ内にfont-awesome.css(またはfont-awesome.min.css)までのパスをリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="path/font-awesome/css/font-awesome.min.css">

スタイルシートのリンク(BootstrapCDNを利用する場合)

Font AwesomeのスタイルシートファイルはCDN配信サービスBootstrapCDNでも配信されていますので、リンクを貼るだけでアイコンWebフォントを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているfont-awesome.min.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

基本的な使い方

Font Awesomeの記述方法

アイコンを表示したい箇所に以下のような記述を追加します。
Font Awesomeのアイコン
<i class=”fa fa-{アイコン名}” aria-hidden=”true”></i>

デモ

See the Pen Font Awesome by JaSTIN (@JaSTIN) on CodePen.light

1 2 3

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

記事ランキング