ブラウザ表示で期待するHTML
<i class="plus-icon"></i>
フォントアイコンで必要な基本的なCSSは書いてあるとする。
失敗するパターン。。。
.plus-icon::before{ content: ""; }
これはダメである
挿入する疑似要素がそのままの文字列が出てしまい、フォントアイコンにならない。
こういう特殊文字は以下のようにしなければならない。
(1) & を \(バックスラッシュ)に変更する。
(2) #とxをそれぞれ0に変更する(または削除)
(3) ;(セミコロン)を削除
正しくは、、、
.plus-icon::before{ content: "\00ecf2"; }
である。
今回のフォントアイコンは、Fontello - icon fonts generator です。
改めて全てを書くと、、
HTML
<i class="plus-icon"></i>
@font-face{ font-family: 'fontello'; src: url('../font/fontello.eot'); src: url('../font/fontello.eot#iefix') format('embedded-opentype'), url('../font/fontello.woff') format('woff'), url('../font/fontello.ttf') format('truetype'), url('../font/fontello.svg#fontello') format('svg'); font-weight: normal; font-style: normal; } .plus-icon{ font-family: "fontello"; font-style: normal; font-weight: normal; font-size: 32px; display: inline-block; text-decoration: inherit; cursor: pointer; color: #606060; margin: 4px 4px; } .plus-icon::before{ content: "\00ecf2"; }