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

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

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

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

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

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

 

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

 

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

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

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

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

Font Awesomeのサイトに飛ぶ

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

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

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

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回のクリックが命を救います。

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

 

コメント

error:Content is protected
タイトルとURLをコピーしました