文章のところで紹介したWEBアイコンはナビゲーションでも使える
Reykjavik以外のテンプレート全てで、動作を確認しています。
Font Awesomeのサービスを使ってＷEBフォントを使用したアイコン設定する。
文章のところでも紹介させていただいたFontAwesomeのアイコンフォントは、GPLで提供されている、商用利用、改変、再配布にいたるまで自由に利用して良いというライセンスつきのWEBフォントを公開しています。これをナビゲーションでも使っちゃおうというのが今回の主旨です。
設定は非常に簡単で、FontAwesomeが提供しているサイトへCSSのリンクを貼るだけです。
この方法なら500種類以上のアイコンが見出しにも使えます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
この一行を、設定＞ヘッダー部分を編集に貼り付けて保存します。
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
使い方を説明します。
下記のスタイルシートを↑上記の『ヘッダー部分に編集』に貼り付けます。
変更が必要な箇所は、赤い文字の部分だけです。
1～５までは、ナビゲーションの順番です。つまりホームは１になります。
<style type="text/css">
.cc-nav-level-0 li a:before{font-family: 'FontAwesome' !important;margin-right:0.5em;}
.cc-nav-level-0 li:nth-child(1) a:before{content:"\f015";}
.cc-nav-level-0 li:nth-child(2) a:before{content:"\f0b1";}
.cc-nav-level-0 li:nth-child(3) a:before{content:"\f164";}
.cc-nav-level-0 li:nth-child(4) a:before{content:"\f1ea";}
.cc-nav-level-0 li:nth-child(5) a:before{content:"\f095";}
</style>
１から始まるfXXXの部分の取得方法
1. Unicodeを取得するために本家サイトに移動します。
2. 使いたいアイコンをクリック
3. Unicodeをコピーする
4. アイコンを変更したいナビゲーション用のCSSを書き換えます。
.cc-nav-level-0 li:nth-child(1) a:before{content:"\f015";} ⇒ .cc-nav-level-0 li:nth-child(1) a:before{content:"\f122";}
5. 書き換えたら保存ボタンを押してページの再読み込みをします。
これで終わり！！
文章で使う方法はこちら＞＞ＷＥＢフォントのアイコンを使いたい
※ナビゲーションでは文章で紹介しているオプションは使用できません！
反転、回転、色の変更、などのオプション指定は、別のページで紹介する予定です。