見出しにWEBフォントのアイコンをつけたい

文章のところで紹介したWEBアイコンは見出しにも使える

見出しアイコンは全テンプレートで利用できることを確認済みです。

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">

#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>

上記の例

見出し大

見出し中

見出し小

ここまでで上記のように、見出し大、中、小にそれぞれWEBアイコンフォントによるアイコンが付きます。

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

これで終わり!!

※見出しでは文章で紹介しているオプションは使用できません!

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

Jimdo 有料版の場合はページ毎に設定することが可能です。

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


株式会社 PIK

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

TEL.03-6433-0422