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

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

このサイトを作り始めてた時からFont Awesome 5を使いたいなーとか思っていたら、その声が届いたのか、秋のバージョンアップで対応と相成りました♪わいひらさん、グッジョブ!

長くなって2ページになってしまいました😓

そよパパ

2019年、FA5。今は2022年で、FA6。どんどん新しくなるけれど、古いのも使えるし、まだまだ現役!ブログで適材適所に使ってあげましょう。

目次

Font Awesome 5 とは

Font Awesome は、HTMLタグを入力するだけで様々なインフォグラフィックをWebページに表示できる素晴らしいサービスです。

こういうのが簡単にできる

Font Awesomeを利用するメリット

普段使いでは、メリットだらけな気がしますが。

  • 無料で利用できる(Proは有料。年間99$)
  • 画像ではなく文字扱いなので読み込み時間がかからない
  • 画像と文字を並べたときのギャップ(ずれ)が発生しない
  • 大きさ、色、背景色、傾き、回転などの表現が簡単♪

Pro版は選択できるフォント数や変更ポイントが多いですが、無料版でも色々と工夫して表現することができます。

色の変更
背景色の変更
アイコンの回転
 アニメーション
 アイコンの組み合わせ

私は文字にマーカーを付けたりするのはあまり好きではなく。

でも、アイコンは使えるなら使いたいなー(気がついたらね)と思ってます。

あえてデメリットを上げるなら、

HTMLを直接編集しないといけない

ということでしょうか。こればかりは仕方がないので、HTML&CSSはWordPressしながらでも少しずつ勉強しておきましょうね。

 

Cocoonでの設定方法

Cocoonではめちゃくちゃ簡単に設定できます。

ダッシュボードへ移動して、Cocoon設定をクリックして、

全体タブの中にある、サイトアイコンフォント項目のFontAwewome5を選択して保存します。

Cocoonの設定画面

これだけです☺(マーカー使っちゃった😂)

 

使用方法

HTMLを取得する

Font Awesomeサイトにある無料Fontから利用したいアイコンのHTMLを取得します。

1.ギャラリーへ移動

Font Awesome アイコンページ
 

2.利用したいフォントを探す。

キーワードを入れて検索します
 

3.フォントをクリック

アイコンのHTMLを取得します
 

4.表示されるHTMLをコピーする

HTMLタグをコピーします

ここまででHTMLの取得完了です。

つぎに、これをWordPressへ貼り付けます。

 

WordPressの編集ページへ貼り付ける

Gutenbergのブロックを利用している場合は、カスタムHTMLブロックを使います。

 

1.カスタムHTMLブロックを挿入する

WordPressの編集画面へHTMLをはりつける

カスタムHTMLボックスのショートカットは、/h です。

あわせて読みたい
Gutenberg入力がさらに加速する爆速ブロック追加法! Gutenbergでコンテンツを作る時に、少しでもキーボードを離したくないそよパパです。 非常に便利なのに、ショートカットできないブロックの入力に毎回+をクリックするの...
 

2.ボックス内にHTMLを貼り付けます。

HTMLをはりつけます
 

3.プレビューボタンを押すとアイコンが表示されれば成功です♪

アイコンが表示されると成功です

HTMLとの混合が面倒くさい場合の便利な入力方法

普段、ブロックで楽して書いているとHTMLで書くのって結構面倒くさい人!😂

そよパパはHTMLで書くのは全く問題ないけど、ブロックが楽すぎて廃人になりかけてる。

なので、そよパパ的な楽な方法を。

  1. まずはブロックで文章を書く
  2. 入れたいアイコンの場所にマーク(例:*****)を入れる
  3. ブロックを「HTMLとして編集」し、マークの部分をHTMLへ置き換える

多分、文章の中にアイコンを使いたいなら、この方法が楽でいいかな。(それでも見つけにくいけど)

ただ、修正するときはHTMLと向き合わないといけないけれどね。

次にアイコンの探し方をご説明します。

1 2
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次