見出しにフォントをつける方法 FontAwesomeとCSSで簡単設定

見出しにフォントをつけたい!

以下はH4におけるフォントの付け方です。

見え方は下記のようになります。

見出し

自分の希望によってh2、h3に変更してください。

hの後ろの数字を変更するだけです。

以下のコードをコピーしてCSSへはりつけてください。

/見出し初期化/

.article h4
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

.article h4 {
padding: 1.2em 0.0em 0.0em;/文字の上下 左右の余白/

position: relative;
padding-left: 1.2em;/アイコン分のスペース/
line-height: 1.4;
}

.article h4:before {
padding: 1.2em 0.0em 0.0em;/文字の上下 左右の余白/
font-family: “FontAwesome”;
content: “\f00c”;/アイコンのユニコード/
font-weight: 900;
position: absolute;/絶対位置/
font-size: 1em;/サイズ/
left: 0;/アイコンの位置/
top: 0;/アイコンの位置/
color: #2498e5; /アイコン色/
font-weight: 900;
}

CSSへのコピーの仕方は下記の外観、カスタマイズを選択します。

ヨメレバ リンク設定方法

その後、下記の追加CSSを選択することで、入力することが可能です。

ヨメレバ リンク設定方法

別のフォントを使用したい場合

別のフォントを使用したい場合は下記のFontAwesomeから設定可能です。

下から9行目にある下記のコードで \f00c を変更すればいいだけです。

content: “\f00c”;/アイコンのユニコード/

下記のサイトから赤枠のICONを選択してください。

ユニコードはアイコンの下にあります。

FontAwesome は下記からどうぞ。