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. WordPress

    おすすめ無料ワードプレステーマ 2017年8月

    Theme HORSEこちらのサイトでは、ハイクオリティーな無料ワ…

  2. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投稿する方法

    ぺんです。ブログ記事を投稿した際に、FacebookとTwit…

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

    WordPress

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

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

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

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」を選んだ3つの理由

    ぺんです。前回のエントリーからずいぶんと間が空いてしまいました…

コメント

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

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

  1. Server

    本気のアフィリエイトに必要なレンタルサーバーは?
  2. イラスト

    画像素材

    コンテンツをより魅力的にする、高品質な無料イラスト素材
  3. ツール

    サムネイル画像を作成してくれるサービス
  4. Server

    アフィリエイト収益ブログの始め方(2)- 利用サービスの選定における3つのポイン…
  5. アフィリエイト攻略

    ようこそ、Affiliate-biz.jpへ
PAGE TOP