グローバルナビゲーションを設置する時にも検討したのが、Font Awesome のアイコン。
今回、about ページをかっこよく編集するにあたり、オークニさんのブログ、オークニズムからコードをコピペさせて頂きました。
詳しくはこちらの記事をお読み下さい。↓
www.maximal-life.work
そのコードの中で Awesome アイコンが使われているんですね。
それがまた良い感じでしたので、グローバルナビゲーションに入れてみました。
もともとのグローバルナビゲーションはこんな感じ。↓
文字だけなんでちょっと寂しい感じですね。
という事で以下を実施。
「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」
にある Global メニューの HTML を変更。
参考までに私のコードを貼っておきます。(もともと、どなたかのコピペですが。)
<!-- g-navi-icon FROM HERE -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- g-navi-icon TO HERE -->
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="https://www.maximal-life.work"><i class="fas fa-home"></i><i</i> ホーム</a></div>
<div class="menu"><a href="https://www.maximal-life.work/archive/category/インターネット・ブログ"></i><i class="fas fa-cog"></i></i> ブログ関連</a></div>
<div class="menu"><a href="https://www.maximal-life.work/archive/category/食事・グルメ"><i class="fas fa-cocktail"></i></i> グルメ</a></div>
<div class="menu"><a href="https://www.maximal-life.work/archive/category/ショッピング"><i class="fas fa-cart-plus"></i></i> ショッピング</a></div>
<div class="menu"><a href="https://www.maximal-life.work/archive/category/ゴルフ"><i class="fas fa-golf-ball"></i></i> ゴルフ</a></div>
<div class="menu"><a href="https://www.maximal-life.work/archive/category/最近読んだ本"><i class="fas fa-book-open"></i></i> 本</a></div>
<div class="menu"><a href="https://www.maximal-life.work/archive/category/日常のこと"><i class="fas fa-book"></i></i> 日記</a></div>
<div class="menu"><a href="https://www.maximal-life.work/about"><i class="fas fa-male"></i></i> Profile</a></div>
<div class="menu"><a href="https://twitter.com/ss117935?lang=ja"><i class="fab fa-twitter"></i></i> Twitter</a></div>
<div class="menu"><a href="https://www.instagram.com/cloudian2017/"><i class="fab fa-instagram"></i></i> Instagram</a></div>
</nav>
するとこんな感じになります。↓
文字の前に指定したアイコンが表示されるようになりました。
完全に自己満足ですが、ちょっとかっこ良くなったと思ってます。
Instagram のアイコンだけ白っていうのがちょっと不満ですが、無料なので我慢します。
↓ ランキングに参加しています。よろしければポチッとして下さい。