Simplicity2でFontAwesomeを使おう!

私も使っている無料Wordpressテーマ「Simplicity2」

シンプルで自分らしくカスタマイズ可能のため、多くの方が使っているのではないでしょうか?

そして、様々なアイコンがキレイに表示できる「Font Awesome」を利用しようとしている人もいると思います。

今回はSimplicity2でFont Awesomeを使う方法と、様々な使い方を紹介します。

Simplicity2でFontAwesomeを使う方法

FontAwesomeを使うために何か新しくインストールするのか、と思う方もいるかもしれませんが、実はSimplicity2はすでにFontAwesomeが使える状態にあります。

デフォルトでなどが使われているので元々使える状態なのですね。ただし、使えるのはFontAwesome4.7.0のものであることに注意してください。

では、さっそく使い方を見ていきましょう。以下のリンクがFontAwesomeのリンクになります。

Font Awesome, the iconic font and CSS framework

この中から使いたいアイコンを選びます。

使いたいアイコンをクリックして以下の画面を開きます。

上記画像内の

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

をコピーします。

コピーしたものをWordpressのHTMLのテキスト表示の中にペーストすれば

と表示されます。

できましたでしょうか?次は具体的なFontAwesomeの使い方を紹介したいと思います。

アイコンの様々な表示方法

上記方法でFontAwesomeを使えるようになったと思います。続いてはそれら表示したいものに様々なエフェクト要素を追加する方法を紹介します。

左右の余白調整

まず、一番よく使うのがアイコンの左右の余白合わせです。文字列の中にアイコンをそのまま入れると少し余白がないために見づらくなってしまいます。

【例】左右の余白がないために、このペンは詰まって見えます。

そこでfa-fwというclassを加えます。具体的には

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

とします。 こうすることで

【例】左右の余白があり、このペンは詰まって見えません。

いかがでしょう。上の例よりも左右に余白が入り、見やすくなりました。

このfa-fwというclassは種類に関係なく、使用することができます。なるべく加えておきましょう。

アイコンのサイズ調整

アイコンのサイズを大きくするには次のclassをfa-fwと同様に加えます。

fa-lg (33% 大きくなります), fa-2xfa-3xfa-4xfa-5x

具体的には以下のようにします。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
【表示例】
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

これでサイズの変更は可能です。普段、文中に入れる際はまわりのフォントサイズに合わせてくれるのであまり気にしなくてもいいかもしれません。

回転するエフェクト

FontAwesomeのアイコンはのように回転させることが可能です。

具体的な方法は、fa-spinというclassを加えます。これを加えることで滑らかに回転してくれます。

もう一つfa-pulseというclassもあります。こちらは8段階で回転します。

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
【fa-spinを加えた場合】
  
【fa-pulseを加えた場合】

読み込み中などによく用いられていますよね。

表示するとき角度をつける

90度回転させたりして、表示する方法はfa-rotate-◯を使います。

上下反転にはfa-flip-vertical、左右反転にはfa-flip-horizontalというclassを追加します。

<i class="fa fa-umbrella"></i> 通常の表示
<i class="fa fa-umbrella fa-rotate-90"></i> 90度回転
<i class="fa fa-umbrella fa-rotate-180"></i> 180度回転
<i class="fa fa-umbrella fa-rotate-270"></i> 270度回転
<i class="fa fa-umbrella fa-flip-horizontal"></i> 左右反転
<i class="fa fa-umbrella fa-flip-vertical"></i> 上下反転
【fa-rotate-◯の表示例】
通常の表示
90度回転
180度回転
270度回転
【fa-flip-horizontal,verticalの例】
左右反転
上下反転

アイコンを重ねて表示する

2つのアイコンを重ねることもできます。まずは親classとしてfa-stackを作成します。

次にfa-stack-2xというclassを加えるものが外側の大きなアイコン、fa-stack-1xと加えるのが内側の小さいアイコンです。

また、外側のアイコンの色と内側のアイコンの色がかぶるときはfa-inverseを加えることで色反転をすることができます。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitterをfa-square-oの内側に
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flagの色反転をfa-circleの内側に
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminalの色反転をfa-squareの内側に
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x"></i>
</span>
fa-banをfa-cameraの内側に
【表示例】


fa-twitterをfa-square-oの内側に


fa-flagの色反転をfa-circleの内側に


fa-terminalの色反転をfa-squareの内側に


fa-banをfa-cameraの内側に

まとめ

いかがでしたでしょうか。FontAwesomeを使うだけで文字や画像だけのページよりも少し華やかになりますね。

今回取り扱ったものは新しいFontAwesomeではないので、新しいものについてはまた扱いたいと思います。

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

シェアする

フォローする

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