CSS疑似要素 :before で見出しの前にアイコンを付ける

タイトルとして目立たせたり、箇条書きで項目として並べるため
見出しの前にアイコン画像を置いたり背景として敷いたりすることがある。
疑似要素:before + アイコンのWEBフォントFontAwesomeを使えば
大きさや位置、色まで簡単に調整できて便利♪
 
FontAwesomeのアイコン一覧

※サイトの<head>の部分に以下を記述して、
FontAwesomeを利用できるようにしておくこと。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

(バージョンアップはこちらで確認→https://www.bootstrapcdn.com/fontawesome/
(このブログでは、使用しているWordpressテーマに
 FontoAwesomeのアイコンが同梱されているので記述していない。)
   
※下の見出しサンプルに共通の基本CSS

.box1, .box2, .box3, .box4, .box5{
position:relative;
font-size:24px;
padding:10px 0px;
margin:10px 0px;
}

 

見出しの前にアイコンを付ける

FontAwesomeのアイコン一覧 で 使いたいアイコンをクリックし、
開いたページでユニコードを確認。
chevron-circle-right では Unicode f138 を確認できる。

CSSを以下のように記述すればOK。(marginやcolorは自由に)

.box1:before{
  content: "\f138 ";
  font-family: fontawesome;
  margin-right: 10px;
  color: #cc0000;
}

  
 
 

見出しの前にアイコンを付ける f138
見出しの前にアイコンを付ける f054
見出しの前にアイコンを付ける f101
見出しの前にアイコンを付ける f061
見出しの前にアイコンを付ける f05d
見出しの前にアイコンを付ける f138
見出しの前にアイコンを付ける f054
見出しの前にアイコンを付ける f101
見出しの前にアイコンを付ける f061
見出しの前にアイコンを付ける f05d

 
 
FontAwesome には ホームページのパーツに使える絵柄のアイコンもいろいろある。





 

スポンサーリンク
スポンサーリンク