BOKENOTE

AboutBlog

大阪住み道産子リーマンのWEB備忘録的な日記的なふわっとしたメモブログです。
本当に個人的な備忘録なので何かを主張したいとかは無い。

Tag

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2BLOG | contentプロパティを使ってアイコンフォントを表示させるとプレビュー画面で上手く表示されない時の対処法

WEB備忘録

ちょっと前に@font-faceでアイコンフォントを読み込ませてcontentプロパティーを使って表示させようとしたら、なぜかプレビュー画面で上手く表示されないことがありました。その解決方法が分かったので備忘録として残しておきます。

contetプロパティーを使った通常の表示方法

li:after {
  content: "\f004";
  font-family: FontAwesome;
}

Font Awesomeのハートマークアイコンをcontentプロパティーを使ってリストに表示させる例。通常はこれでちゃんと表示されるのですが、FC2ブログのプレビュー画面では\f004\の部分が上手く認識されず\消えてしまう。

で、解決方法

li:after {
  content: "\\\\f004";
  font-family: FontAwesome;
}

とにかく表示されるまで\を足すことで表示されます。僕の場合\4つで表示されました。fc2ブログだとCSSいじってるとプレビューで確認する事が多いので使う機会もあるじゃないかな。

ちなみに、\を含んだ記述があると\から下の記述がごっそり認識されない時がありますが、大抵スタイルシートの一番下に記述してやると直ります。表示が崩れた時に試してみてください。以上。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。