【超簡単】Cocoonグローバルメニューにアイコンを入れる方法!

アイキャッチ画像気になって調べたこと
この記事は約3分で読めます。
スポンサーリンク

グローバルメニューにアイコン!?

みなさんこんにちは!今日も今日とても寒い日が続きます。

さて、他のサイト様を見学させて頂いた際、目にしたものがありました。

それはグローバルメニューの横にあるちょこんとかわいいアイコン。

 

あれどうやってつけるの!?

 

めちゃくちゃ気になるんですが。

グローバルメニューにアイコンを付ける方法

とても気になったので調べてみました。
そうしたらアッサリ見つかったのでココで紹介させてくださいね。

「5つのステップで完了」という何とも簡単なものなのでぜひチャレンジしてみてください!

Font Awesomeのサイトに飛ぶ

こちらのサイトに飛びます。

Just a moment...

こんな感じのサイトになっています。

Font awesome

Font awesome

※Cocoonで対応しているバージョンが4.7.0なのでお間違えないようにしてくださいね。
リンク先がそのバージョンになっているのでご安心を。

 

好きな柄を選ぶ

このアイコン一覧から好きなのを選びます。例えばこれを選んだとします。

fa-snowflake-o を選択した場合

fa-snowflake-o を選択した場合

 

コードをコピーする

コードをコピーします

コードをコピーします

図の中にあるこの部分をコピーします。

<i class=”fa fa-snowflake-o” aria-hidden=”true”></i>

 

スポンサーリンク

コードの加筆・修正をする

コピーしたコード

<i class=”fa fa-snowflake-o” aria-hidden=”true”></i>

これをテキストか何かに貼り付けて、そこに下のように加筆修正をします。

  

<i class=”fa fa-snowflake-o fa-fw” ></i>

行ったことは

  • fa-fwを加筆
  • aria-hidden=”true”を削除

ちなみに「fa-fw」はアイコンと文章の間に一定の間隔を置くコードになっています。

修正したコードを張り付ける

次に修正したコードを張り付ける作業です。

コードを張り付ける

この「ナビゲーションラベル」にコードを貼り付けます!

 

出来上がり

これだけでグローバルメニューにアイコンがちゃんとついているのを確認できると思います。

グローバルメニューにアイコン登場!

グローバルメニューにアイコン登場!

 

なんて簡単な設定なんでしょうね!皆さんもぜひやってみてください。

 

ランキングに参加しています。
1回のクリックが命を救います。

にほんブログ村 海外生活ブログ ニュージーランド情報へ
にほんブログ村

 

コメント

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