Font AwesomeのUnicodを :before / :afterに挿入する

「Font Awesome」を疑似要素である「:before と :after 」の「content」プロパティにて「Font Awesome」の「Unicode（ユニコード）」を入れてアイコンを表示させます。

「content」プロパティに直接HTMLを記述することはできないため、アイコンの「Unicode」を挿入します。

各アイコンのUnicodeは下記のページに掲載されています。

http://fontawesome.io/cheatsheet/

[Example1] Unicodを「:before」に挿入する

 <style>
  h1:before {
  content: "\f206";
  font-family: FontAwesome;
}
 </style>
 
 <body>
   <h1>BICYCLE</h1>
 </body>

「:before」 : { } にアイコンの形を指定する。

「content」: ここでは「\f101」Unicodeを指定する。＝htmlでは[fa fa-bicycle]

「font-family」: : 文字は「Font Awesome」ということを直接指定する。

結果、

BICYCLE

と表示されます。

リンク文にて「Font Awesome」アイコンを「:after」に表示させる

今度は、「:after」疑似要素を使って、リンクがかかった文章上にマウスをあてると、文末に[fa fa-bicycle]アイコンが現れるようにCSSを作ってみましょう。

 <style>
 a {font-size:1em;color: #666666;}
 a.bicycle:hover{color:#ff00ea;}
 a.bicycle:hover:after{content:"\f206"; font-family:"FontAwesome";color:#ff00ea;}
 </style>
 
 <body>
   <a class="bicycle" href="#">自転車に乗って海へ行こう！</a>
 </body>

▼　以下のリンク文にマウスを当ててみますと、自転車のアイコンが表示されます。

自転車に乗って海へ行こう！

Prev 1 23Next