ナビゲーションにWEBフォントのアイコン

文章のところで紹介したWEBアイコンはナビゲーションでも使える

Reykjavik以外のテンプレート全てで、動作を確認しています。

Font Awesomeのサービスを使ってWEBフォントを使用したアイコン設定する。

文章のところでも紹介させていただいた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~5までは、ナビゲーションの順番です。つまりホームは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>

 1から始まる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. 書き換えたら保存ボタンを押してページの再読み込みをします。

これで終わり!!

文章で使う方法はこちら>>WEBフォントのアイコンを使いたい

※ナビゲーションでは文章で紹介しているオプションは使用できません!

反転、回転、色の変更、などのオプション指定は、別のページで紹介する予定です。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422