目次
グローバルメニューにアイコン！？
みなさんこんにちは！今日も今日とても寒い日が続きます。
さて、他のサイト様を見学させて頂いた際、目にしたものがありました。
それはグローバルメニューの横にあるちょこんとかわいいアイコン。
あれどうやってつけるの！？
めちゃくちゃ気になるんですが。
グローバルメニューにアイコンを付ける方法
とても気になったので調べてみました。
そうしたらアッサリ見つかったのでココで紹介させてくださいね。
「5つのステップで完了」という何とも簡単なものなのでぜひチャレンジしてみてください！
Font Awesomeのサイトに飛ぶ
こちらのサイトに飛びます。
Font Awesome Icons
Font Awesome, the iconic font and CSS framework
fontawesome.com
こんな感じのサイトになっています。
Font awesome
※Cocoonで対応しているバージョンが4.7.0なのでお間違えないようにしてくださいね。
リンク先がそのバージョンになっているのでご安心を。
好きな柄を選ぶ
このアイコン一覧から好きなのを選びます。例えばこれを選んだとします。
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回のクリックが命を救います。
コメント