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

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

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

  2. Jetpack

    WordPress

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

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

  3. WordPress

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

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

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

    Server

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

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

  5. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法

    ぺんです。先日公開したこの記事の中で、オリジナルプラグ…

  6. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

    (初心者向け)WordPressサイトのバックアップ、リストア(復旧)手順の詳細解説

    ぺんです。 Wordpressサイトを運営していて、気になるのがサイト…

コメント

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

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




最近の記事

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

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投…
  2. MagCast ワードプレステーマ

    WordPress

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

    アフィリエイト環境に無料ブログサイトは使えるのか?
  4. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡…
  5. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

    (初心者向け)WordPressサイトのバックアップ、リストア(復旧)手順の詳細…
PAGE TOP