Font Awesomeフォントのアイコンを使用して WordPress ブログを個性的に飾ること - WordPress 情報パッケージ
ベストセラー人気 WordPress テーマTop 30 詳細

Font Awesomeフォントのアイコンを使用して WordPress ブログを個性的に飾る

Last Updated:2015年4月20日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

はじめ

Font Awesomeはサイズを自由に調整することができるベクトルのアイコンにより、サイズ、カラーなどを勝手に設定が可能です。 特徴を見てみると(Font Awesomeで言う特徴):

  • シングルフォント、519個のアイコン
  • JavaScript不要
  • 無限の拡張性
  • 無料! (この点が非常に気にしますね)
  • CSSでの調整
  • レティナディスプレイに適してい
  • などなど

アイコンのリストは、 http://fortawesome.github.io/Font-Awesome/icons/で確認が可能です。 さまざまなアイコンが提供され、CSSで色、サイズなどを自由に調整が可能である点が魅力的です。

Font Awesomeインストールする

いくつかの方法でFont Awesomeを利用することができます。 http://fortawesome.github.io/Font-Awesome/get-started/ページにアクセスすると、いくつかの方法が提示されています。 その中で二番目の方法であるファイルを直接ダウンロードしてインストールする方法を説明します。

Font Awesomeダウンロード

http://fortawesome.github.io/Font-Awesome/ ページのFont Awesomeアイコンをダウンロードします。

font-awesomeフォルダをWebホスティングサーバーにアップロード

上記のダウンロードしたzipファイルを解凍した後、font-awesomeフォルダを丸ごとFTP経由でサーバーに送信します。
Font Awesome Zip file 4.3.0
フォルダ名をfont-awesomeに変えてください。

font-awesome.min.cssパスを追加

WordPress テーマのheader.phpファイルに次の行を追加します。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

もちろん "href =" path / to / "は、実際にfont-awesomeフォルダがアップロードされたパスを指定する必要があります。これでFont Awesomeを WordPress 内で使用することができます。 http://fortawesome.github.io/Font-Awesome/examples/ページに移動し、使用するアイコンを選択した後、コードをコピーして使用することができます。

使用例:コードを利用した方法

Exampelsページまたは アイコンページで、目的のアイコンを最初に選択します。 次に、これらのアイコンに関連付けられたコードをコピーして、phpファイルや文章のhtmlソースに貼り付けします。
Font Awesome example
たとえば、上の図に示されているコードをコピーして挿入すると、下記のように、Webに表示されます。

アイコンが小さすぎる出ますね。 その後、cssスタイルを適用することができます。 次のようにスタイルを指定してくれれば:

<i class="fa fa-spinner fa-spin" style="font-size:30px; color:red;"></i>


サイズが増えた? 上記のように直接スタイルを指定しちゃってもしますが、テーマにスタイルシートを追加する方法で適用すると、より便利に使用が可能です。 (スタイルシートにCSSを追加する方法は、 ここを参照してください。)
たとえば、上記の場合は、次のようなCSSコードを追加することができます。

.fa.fa-spinner.fa-spin {
font-size: 30px; 
color: red;
}

使用例:CSSの背景画像として挿入する

Font Awesomeのコードをソースファイルに直接追加することはできない状況では、:before、:after形式を使用して挿入することができます。 基本的なコードの形式は次のとおりです:

.element:before {
content: "\f005";
font-family: FontAwesome;
// 스타일 지정
}

ここで重要なことは、content:に追加されたコードとfont-family:FontAwesome; 両方の項目です。 Font Awesomeのアイコンは、「\ f005 "のようにCSSコードでも使用が可能です。 完全なリストは Cheatsheetページを参照してください。

この方法を使用すると、メニュー項目の前に目的のアイコンを挿入することができ、目的の要素の前に、適切なアイコンの挿入も可能です。
例えばカテゴリー項目の前のbulletをアスタリスクで置き換えるには、次のようなコードを追加します。

#menu-sidebar li:before {
  content: "\f005";
  font-family: FontAwesome;
  margin-left: -20px;
  margin-right: 5px;
  color: red;
}

結果を見ると、次のようにカテゴリー項目のbulletがアスタリスクに変更されました。
Applying font awesome to bullets

Font Awesomeは無料で提供されているベクター形式のアイコンを提供しています。 Font Awesomeを自由に活用して、個性的なブログを作成してください。



2のコメント

コメント