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

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

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

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

    WordPress

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

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

コメント

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

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

  1. アフィリエイト攻略

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

    アフィリエイト環境に無料ブログサイトは使えるのか?
  3. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投…
  4. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ve…
  5. Server

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