Font Awesomeの使い方

WordPress

  

Font Awesome CDN – 追加された新しいフォント(Ver.4.7.0)のWordPressサイト上での使い方



ぺんです。

立ち上げ途中のサイトで、Font Awesomeのアイコンを活用したいと思い、その利用方法を調べていたのですが、使ってみたいと思った一部のアイコン()が表示されませんでした。どうやら参照していたスタイルシートが古く、新しいアイコンに対応していなかったようです。

ここでは、Font AwesomeのアイコンをWordPressで管理しているサイト上で表示させるための手順を示します。



Font Awesomeとは?

Font Awesome(http://fontawesome.io/)とは、Webフォント形式のアイコンです。これらのアイコンはベクター形式で提供されているため、拡大してもぎざぎざにならず、スタイルシートを用いて、色、サイズなどを自由にカスタマイズすることが出来ます。これを書いている時点での最新バージョンは4.7.0で、675種類のアイコンが公開されています。

Font Awesomeの利用方法は?

Font Awesomeが提供しているスタイルシートを読み込めば、フォントを利用可能です。
下記の例では、”fa-android” というアイコンを、”fa-lg” 33%拡大して表示します。





このようにアンドロイドのアイコンが表示されるわけですね。

読み込むスタイルシートはどこ?

Font AwesomeのGet-Started(http://fontawesome.io/get-started/)ページをみてみましょう。Font Awsomeを利用する方法としては、CDNを利用する方法と、自分のサーバーにフォントをアップロードする方法があります。今回は、一番簡単なCDNを利用する方法を採用します。

CDN: Contents Delivery Network – 一言で言うと、コンテンツデータの配信専用のサーバー群です。画像などの重いデータをCDN上に配置することで、Webサイトへのアクセスを軽減することができます。別名キャッシュサーバーなどと呼ばれており、大量のアクセスが殺到する大手のECサイトなどでも多用されています。例えば、多くのユーザーが利用する検索の結果データ等をCDNにキャッシュしておくことで、同じ検索リクエストが来た場合に、再度検索クエリを実行せずにキャッシュされている検索結果をユーザーに返信することで、サーバーの負荷を大幅に軽減できるというわけです。

まずは、メールアドレスを入力する

メールアドレスを入力して、”Send my Font Awesome embed code!”ボタンをクリックします。

次にCSSのパスをゲットする

しばらくすると、Font Awesomeからメールが送付されてきます。このメールの中にCDN経由でFont Awesomeの設定情報をダウンロードするためのJava Scriptのリンクが記載されています。

WordPressの設定をする

では先ほどメールで受領したJava Scriptを読み込ませるための設定を行います。

functions.phpにコードを追加する

functions.phpに以下のコードを追加します。

これで準備は完了です。

フォントを表示してみる!

以下のタグで、Font Awesomeのアイコンを任意の場所に表示することができます。

Font Awesomeには面白いフォントもあります。

例えば、スターウォーズの反乱軍のエンブレム

 

例えば、スターウォーズの帝国軍のエンブレム


いろいろ試してみると、面白いことが出来そうですね。

アイコンの一覧はこちら(http://fontawesome.io/icons/)にありますので、ご覧ください。



関連記事

  1. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法

    ぺんです。以前ご紹介した、ニュースメディア風のワードプレステー…

  2. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

  3. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方

    ぺんです。前回、このブログをエックスサーバー上で運営することは…

  4. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

  5. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法

    ぺんです。 Google Chromeを使っていると、突然このような表…

  6. WP Responsive Menu

    WordPress

    WP Responsive Menu – スマホ対応のレスポンシブメニューを追加する、W…

    ぺんです。サイトを運営する上で、スマホ対応はとても重要です。…

コメント

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

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

最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  5. ウイジェットエリア
  1. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法
  2. マイクロソフトアカウントの登録方法

    SNS

    2018年最新版-マイクロソフトアカウントの登録方法
  3. Twitterアカウントの登録方法

    SNS

    2018年最新版-ツイッターアカウントの登録方法
  4. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法
  5. 読み込みが遅いWebサイト

    Server

    mod_pagespeed設定で、ウェブのパフォーマンスを大幅に向上する方法
PAGE TOP