図書館へ行かずに本を沢山読もう!Kindle Unlimited を利用する

Cocoon で Font Awesome 5 が使えるようになりました♪

cocoonでfontawesome5が使えるようになったCocoon

Font Awesomeで Font を探す方法についてのご説明です。

アイコンの探し方

アイコンの探し方は2通りあります。

 

検索して探す

画面上部の検索ボックスへ英単語を入力して検索する方法です。

メリットは

単語を入れればすぐに出てくる

のですが、逆にデメリットは、

どういう名前か分からないときは使えない

ということ。

不明の場合は、画面の左側に用意してあるカテゴリー一覧から探し出します。

 

カテゴリー一覧から探す

一覧画面の左側には、カテゴリーリストがあります。

全て英語ですが、一応日本語に変換したリストをここへ紹介しておきます。

なお、将来的にFont Awesome のカテゴリーリストが変更になった場合は利用できなくなる可能性があります。

役立ちそうならTweetしてね♪

Font Awesome5 の無料アイコンカテゴリーリスト(日本語)が載ってます♪ Click To Tweet 

アイコンの装飾方法について

そのままの利用では味気ないので、いくつか変更の方法をご紹介します。なおサンプルは、Font Awesomeのサイトのものを利用しています。

【初心者さんへ】Class の中の記述に注目してね

HTMLもCSSもあやふや、の場合は難しいかもしれないけれど、

コピーしてきたHTMLとサンプルのHTMLを見比べてみてね。

例)コピーしてきたHTML

<i class="fas fa-camera"></i>

例)サイズ変更で紹介されているHTML

<i class="fas fa-camera fa-xs"></i>

class=”” のなかに書かれている内容が違いますよね。

ここでは、fa-xs が追加されています。

そこで、カスタムHTMLブロックを挿入し、その中へ記述します。

<i class="fas fa-camera"></i>
<i class="fas fa-camera fa-xs"></i>

表示されましたか?

カスタムHTMLだとすぐにプレビュー表示ができるから簡単ですよ♪

ただ、組み合わせなどになるとページプレビューでないと確認できないことあるから、その場合は保存してプレビューをしてみてくださいね。

 

サイズ変更 fa-xx

サイトで設定されているフォントサイズを基準に大きさが相対的に決まります。

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

特定の場所のフォントサイズを変更すれば、その範囲内での相対的なサイズへ変更されます。

例)Divボックス内のフォントサイズを強制的に0.5remに変更した時の変化。

<div style="font-size: 0.5rem;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>
 

固定幅にする fa-fw

アイコン幅を固定幅に固定して、列を整えます。主にリストなどで活躍します。

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
<div style="font-size: 2rem;">
  <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

※fa-fwの指定がない場合の表示(微妙に文字開始位置がずれている)

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
 

リスト内のアイコン fa-ul, fa-li

Cocoonでは予めリストアイコンを変更できるブロックが用意されています。

ここでは、その他のアイコンを使いたい場合のご紹介です。

  • List icons can
  • be used to
  • replace bullets
  • in lists
<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
 

回転アイコン fa-xxx-xxx

アイコンの傾きを変更できます。

<div class="fa-4x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>
Class傾き
fa-rotate-9090°
fa-rotate-180180°
fa-rotate-270270°
fa-flip-horizontal水平方向へ反転
fa-flip-vertical垂直方向へ反転
fa-flip-both水平・垂直方向へ反転 (5.7.0以上必要)
 

アイコンのアニメーション化 fa-spin fa-pulse

特定のアイコンはアニメーションを追加することができます。

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>
アイコンメイショウHTMLタグ
アスタリスク<i class="fas fa-asterisk"></i>
原子<i class="fas fa-atom"></i>
証明書<i class="fas fa-certificate"></i>
サークルノッチ<i class="fas fa-circle-notch"></i>
コグ<i class="fas fa-cog"></i>
コンパクトディスク<i class="fas fa-compact-disc"></i>
コンパス<i class="fas fa-compass"></i>
コンパス<i class="fas fa-compass"></i>
十字線<i class="fas fa-crosshairs"></i>
ダルマチャクラ<i class="fas fa-dharmachakra"></i>
ファン<i class="fas fa-fan"></i>
ハイカル<i class="fas fa-haykal"></i>
救命浮輪<i class="fas fa-life-ring"></i>
救命浮輪<i class="fas fa-life-ring"></i>
パレット<i class="fas fa-palette"></i>
リング<i class="fas fa-ring"></i>
スラッシュ<i class="fas fa-slash"></i>
スノーフレーク<i class="fas fa-snowflake"></i>
スノーフレーク<i class="fas fa-snowflake"></i>
スピナー<i class="fas fa-spinner"></i>
ストロープワフェル<i class="fas fa-stroopwafel"></i>
太陽<i class="fas fa-sun"></i>
太陽<i class="fas fa-sun"></i>
同期する<i class="fas fa-sync"></i>
同期する<i class="fas fa-sync-alt"></i>
陰陽<i class="fas fa-yin-yang"></i>
 

ボーダー付きアイコンとプルされたアイコン fa-pull-xx, fa-border

アイコンを段落の端において文字列を折り返しさせる、アイコンの周りをボーダーで囲むなどしてアイコンを目立たせる方法。

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further… And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

例)よくある引用の時に利用されるアイコン

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
  • fa-border 枠線で囲う
  • fa-pull-right 右側に寄せる
  • fa-pull-left 左側に寄せる
 

アイコンの重ね合わせ fa-stack-xx, fa-inverse

四角や●などのアイコンの上にアイコンを重ね合わせることでもっと個性的に見せることができるようになります。

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

背景アイコン、前景アイコンの順番で指定します。

  • fa-stack-1x : 1倍の大きさ
  • fa-stack-2x : 2倍の大きさ
  • fa-inverse  : 白抜きにする指定
 

※場合によってはこういう指定方法も必要。ケースバイケースなので説明は省略します。

<i class="far fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="far fa-circle fa-2x"></i> 
 

中には未対応のものもある

この記事を書いている時点(2019/11/23)では、Font Awesome 5で追加されたユニークな以下の機能がうまく反映できていなかった。

  • マスキング
  • レイヤー
  • 明暗

原因は特定できないけれど、いずれ対応されるようになるかもしれない。

 

終わりに

画像やアイコンはサイトに彩りを与えてくれますよね。

もちろん、使いすぎは良くないですが。

センス良い人とか、もっと上手に使いこなすだろうなー♪

感謝をこめてCocoonの宣伝をば♪

WordPressテーマ Cocoon

シンプルで使いやすい、それでいて機能が豊富。有料テーマに負けないテーマ!

SoyoLifeではこちらのテーマを利用させて頂いています。

Cocoon公式サイト

ずいぶんと長い記事になりました。

最後まで読んでくださりありがとうございます。

 
そよパパ
そよパパ

WordPress好きなんだなーっとしみじみ感じてます。


Twitterで日々の生活のことTweetしています。気に入ってもらえたらフォローよろしくお願い致します♪

コンテンツがお役に立てれば幸いです。

2019/9/9より連続した更新は12月で止まりました💧

毎日更新し続けられる人、本当に尊敬しか無い。

コメント

タイトルとURLをコピーしました