Lognote

ネット集客に強い整体院サイトを制作

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法

公開日:2016-04-04
最終更新日:

アイコンフォント「Font Awesome」を、WordPressに導入する方法を紹介します。

Font Awesomeの導入方法

導入方法は2通りあります。

一つは、フォントファイルを自サーバーにアップして、パスを記述する方法。もう一つは、Font Awesomeのサイトに置かれたファイルに直接リンクする方法です。

前者は、自サーバーがエラーにならない限りずっと使えるので安心です。後者は、導入な簡単な分、Font Awesomeのサイトがダウンしたときアイコンが表示されなくなる可能性があります。

どちらでも好きなほうで導入できますが、初心者は後者がオススメです。

自サーバーにファイルをアップする方法

04122428

まず下のリンクからファイルをダウンロードします。

[ダウンロード]をクリックします。

04122429

[No thanks,just download Font Awesome]をクリックします。

ダウンロードしたファイルを、FTPソフトを使って自サーバーにアップします。

アップロードしたファイルの中から、font-awesome.min.cssを指定してスタイルシートを読み込みましょう。

サイトから直接リンクする方法

font-awesome-03

こちらはとても簡単で、下記コードをヘッダー内に追加するだけです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

実際にFont Awesomeアイコンを表示する

Font Awesomeアイコンを表示させるには、アイコンそれぞれのコードを記述するだけです。

下記のページに、全てのアイコンが紹介されています。

使用したいアイコンをクリックすると、下に記述用のコードが表示されます。

試しに一つ、カレンダーアイコンを表示してみます。

<i class="fa fa-calendar" aria-hidden="true"></i>

04153402

アイコンフォントは文字扱いなので、CSSでプロパティを変更することで大きさや色を変更することができます。

例えば、大きさを50px、色を青にしてみます。

.fa-calendar {
  font-size: 50px;
  color: blue;
}

疑似要素を使ってアイコンを表示する

ここまでは、直接コードを記述する方法ですが、一般的には:before、:afterなどの疑似要素で使われることが多いかと思います。

例えば、見出しの先頭にワンポイントとして表示したりします。当ブログだと、下の画像のように使用しています。

font-awesome-05

疑似要素を使うには、まず下記のようなCSSを記述します。beforeは指定した要素の前、afterは後ろにアイコンが表示されます。

h3:before {
    content: '\f1e0';
    font-family: "FontAwesome";
    padding-right: 5px;
}

contentプロパティーに、fから始まる4桁のUnicodeを記入します。これも各フォントページに小さく載っています。

font-awesome-06

先頭には、\を必ず入れてください。キーボード半角状態で¥を押したものです。

アイデア次第で、様々なブログカスタマイズに応用できるアイコンフォント。好みのアイコンフォントを見つけて遊んでみてくださいね。

以上、「アイコンフォント「Font Awesome」をWordPressに導入する方法」という記事をお届けしました。

-WordPress
-,

この記事のタイトルとURLをコピーする
アイコンフォント「Font Awesome」をWordPressに導入する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

affinger4-hukidashi-thumbnail

WordPressで会話風ふきだしを表示させるCSSカスタマイズ

AFFINGER4に実装されている会話風ふきだし機能。あれってすごく便利そうですよね!この記事ではWordPres...

iphone-icon-black-thumbnail

WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分 …

custom-post-category-thumbnail

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回は …

CSSでオリジナルのFeedly購読ボタンを作成する方法

皆さんはブログにFeedlyボタンは設置していますか?リピーターを増やすには必須のサービスですが、公式...

wordpress-category-tag-change-thumbnail

WordPressのカテゴリー⇔タグを変換して訪問者に親切なブログ作りをしよう

ブログ訪問者はサイドバーなどに設置されたカテゴリーから「Wordpressの記事数が多いから参考になる記事があ …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい