Font AwesomeをCSSのcontentプロパティで使用する

このサイトでもアイコンとして利用しているFont Awesome

通常Font Awesomei要素を追加しますが、CSSのcontentプロパティに記述することでHTMLを変更することなく使用できます。

例:Bootstrap 3 のパンくずで、/を右矢印 に変更する

Unicodeは F105

icon-angle-right

  1. .breadcrumb > li + li:before {
  2.     content: "\f105";
  3.     font-family: FontAwesome;
  4. }

簡単な記述で、ご覧のとおり

breadcrumb

Posted