文章のところで紹介したWEBアイコンは見出しにも使える
見出しアイコンは全テンプレートで利用できることを確認済みです。
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">
#content_area h1:before,
#content_area h2:before,
#content_area h3:before{
font-family: 'FontAwesome' !important;
margin-right:0.5em;
}
#content_area h1:before{content:"\f277";margin-right:0.5em;}
#content_area h2:before{content:"\f0f6";margin-right:0.5em;}
#content_area h3:before{content:"\f27b";margin-right:0.5em;}
</style>
上記の例
見出し大
見出し中
見出し小
ここまでで上記のように、見出し大、中、小にそれぞれＷＥＢアイコンフォントによるアイコンが付きます。
アイコンを変更する（１から始まるfXXXの部分の取得方法）
1. Unicodeを取得するために本家サイトに移動します。
2. 使いたいアイコンをクリック
3. Unicodeをコピーする
4. アイコンを変更したいナビゲーション用のCSSを書き換えます。
#content_area h1:before{content:"\f015";margin-right:0.5em;}
▼
#content_area
h1::before{content:"\f122";margin-right:0.5em;}
5. 書き換えたら保存ボタンを押してページの再読み込みをします。
これで終わり！！
※見出しでは文章で紹介しているオプションは使用できません！
反転、回転、色の変更、などのオプション指定は、別のページで紹介する予定です。