渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:Font Awesome 5 でかっこいいアイコンを使う方法

f:id:ss17935:20181216201519j:plain

 

グローバルナビゲーションを設置する時にも検討したのが、Font Awesome のアイコン。

今回、about ページをかっこよく編集するにあたり、オークニさんのブログ、オークニズムからコードをコピペさせて頂きました。

詳しくはこちらの記事をお読み下さい。↓

 

www.maximal-life.work

 

そのコードの中で Awesome アイコンが使われているんですね。

それがまた良い感じでしたので、グローバルナビゲーションに入れてみました。

もともとのグローバルナビゲーションはこんな感じ。↓

 

f:id:ss17935:20181222190209p:plain

 

文字だけなんでちょっと寂しい感じですね。

という事で以下を実施。

「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」

にある 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>

 

するとこんな感じになります。↓

 

f:id:ss17935:20181222190657p:plain

 

文字の前に指定したアイコンが表示されるようになりました。

完全に自己満足ですが、ちょっとかっこ良くなったと思ってます。

Instagram のアイコンだけ白っていうのがちょっと不満ですが、無料なので我慢します。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ