WordPress

【STINGER5】見出しh3タグ先頭にアイコンフォントを設定する方法

STINGER5に標準で使用されている「Font Awesome」を利用して、h3タグの先頭にアイコンフォントを設定する方法を紹介します。

このカスタマイズは、キャリコさんの記事を参考にさせて頂きました。

style.cssの編集をする

[codebox title=”style.css”]

.post h3:before {
content: "\f046";
font-family: FontAwesome;
font-size: 24px;
color: #4682B4;
position:relative;
top:2px;
margin-right:5px;
}

[/codebox]

アイコンフォントの大きさは「font-size」の数字を変更。

色を変えたい場合は「color: #4682B4;」の「#4682B4」のカラーコードを変更。

位置の調整は「position:relative;」の「top」「margin-right」のpx数を変更。

それぞれ、デザインに合わせて調整して下さい。

表示するアイコンフォントを変更する方法

h3tag-iconfont_02 

Iconsをクリック。

使用したいアイコンを選択

h3tag-iconfont_03  

Unicodeの4桁の英数字を確認

h3tag-iconfont_04

[box class=”box28″ title=”アイコンフォントの変更”]

content: “\f046”;

「f046」の部分を変更することで可能です。

[/box] 

ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。

POSTED COMMENT

  1. のぶゆき より:

    はじめまして!

    http://nobuyukioishi.com/

    でブログを書いております、のぶゆきと申します。

    Stinger5のH3が少し見づらかったので、何か参考になるページは無いかな?と思って調べていたところ、こちらのページにたどり着きました。

    さて、コチラのソースですが↓

    .post h3:before {
    content: “f046”;
    font-family: FontAwesome;
    font-size: 24px;
    color: #4682B4;
    position:relative;
    top:2px;
    margin-right:5px;
    }

    こちらのコード、ありがたく使わせていただいております!

    …しかし、contentの部分がこのままでは”f046″という文字がそのまま表示されてします。

    “\f046″ (環境によっては”¥f046”)

    であれば、問題なく表示されるようでしたので、一応ご報告させていただきます。

    よろしくお願いいたします。

    • nekonotesou nekonotesou より:

      こちらの記述漏れでしたので、早速修正しました。
      間違いの指摘ありがとうございます。

      ブログ拝見いたしました。
      まだブログを始めたばかりみたいですね!ブックマークしておきました!