Better Font Awesome 簡単にアイコンのサイズ・色を変更する方法

たくさんのフォントが引き出しの中に入っている
 こんにちは。

ブログにアイコンを使用したいと思い、
Better Font Awesome を導入してみました。

アイコンの色とサイズの変更について
私が行った手順を紹介させていただきます。

私の Word press 環境ですが
テーマは Simplicity2 (子テーマあり)です。

スポンサーリンク

Font Awesome

 
設定の手順などはこちらを参考にさせていただきました。
参考5分でわかる、Font awesomeの使い方 | Yuichiro Suzuki Reports

また、Better Font Awesomeについても詳しく書かれています。

サイズの変更

Better Font Awesomeを有効化したら
[Insert Icon]をクリックし、使いたいアイコンを呼び出します。

Insert-Iconボタンをクリック
 
今回はアイコンを使用してみます。

アイコンを選択すると、記事中に

[icon name="diamond" class="" unprefixed_class=""]

と表示されます。

記事本文中にコードが表示されている

装飾効果の対応表を確認し、任意のサイズに変更します。
装飾効果一覧http://fontawesome.io/examples/

サイズを4倍にしたい場合は

[icon name="diamond" class="" unprefixed_class="fa-4x"]

と追記します。

色の変更

アイコン色を変えたい場合については
こちらの記事を参考にさせていただきました。

参考フォントアイコンの使い方 (FontAwesome) – Syncer

まずはスタイルシート(style.css)に以下のコードを追記します。

/*---------------------------------
 アイコンの色
--------------------------------*/
.fa-deep:before
{
color: #731dd8 ;
}

クラス名やカラーコードについては適宜変更してください。
WEB色見本 原色大辞典 – HTMLカラーコード

追記が完了したら、サイズ変更の際と同じように

[icon name="diamond" class="" unprefixed_class="fa-deep"]

と記入することで色が変わります。

サイズと色の変更

サイズと色を変更したい場合は

[icon name="diamond" class="" unprefixed_class="fa-4x fa-deep"]

続ける形で記入しましょう。

サイズと色が変わります。

あとがき

様々なアイコンを使ってブログを楽しく書きましょう。
ご覧頂き、ありがとうございました。

スポンサーリンク
レクタングル大




レクタングル大




シェアする

フォローする