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. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

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

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

  2. WordPress

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

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

  3. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズ…

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

    WordPress

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

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

  5. WP Responsive Menu

    WordPress

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

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

  6. 沢山のメールボックス

    WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

コメント

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

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

  1. お役立ちツール

    保護中: itemlink プラグインテスト用
  2. あふぃぶ

    あふぃぶ 運営情報

    ようこそ、「あふぃぶ」へ
  3. 読み込みが遅いWebサイト

    Server

    mod_pagespeed設定で、ウェブのパフォーマンスを大幅に向上する方法
  4. あふぃぶ 運営情報

    ようこそ、Affiliate-biz.jpへ
  5. Server

    本気のアフィリエイトに必要なレンタルサーバーは?
PAGE TOP