忘れがち!cssの:befor / :afterでfont awesomeのフォントを使う方法。

お役に立ったらポチッとお願いします

cssいじってますか?おおつか( @otkizm )です。

基本的なものは覚えていても、意外と忘れがちなのが『まれによくある』ケース。あれ…前にやったのは覚えてるけど…どうやるんだったけ?なんてそのつどググったりするのが面倒なので覚書です。

スポンサーリンク

みんな大好きFont Awesome!

Font Awesomeスクリーンショット
Font Awesome, the iconic font and CSS toolkit

アイコンウェブフォントのパイオニア、みんな大好きなFont Awesome。

むかしはね、ちょこっとのアイコンでも画像作ってたんだよね…。imagesフォルダがちまちましたファイルでいっぱいになってたのですよ。しかもちょっとサイズを大きくしたいとか、色を微妙に変えたいときには描きなおし。それにくらべてFont Awesomeはフォントなのでサイズも色も自由自在!コードもスッキリ!ああもうわたしはWebフォントが大好きだ!w

ちなみに、<span>を使う方法もあるようですが、わたしはアイコンとすぐわかる<i>を使うほうが好きです。

:before or :afterにもFont Awesomeを使いたい!

そしてこれがまさに『まれによくある』事態です(笑)
そんなに普段使わないけど、cssだけちょろっといじって見栄えを変えたいな~というときに思い出せないという…。

確かこうだったよね!とやってしまいがちなのがこれ。

そうです。contentプロパティにはhtmlを挿入できないのです…!

じゃあどうするかというと…

これでOK。contentの値、”\f185″がミソです。Unicodeで文字を指定して、どのフォントから引っ張ってくるかをfont-familyで指定する感じでしょうか。

Font AwesomeのUnicodeはどこに?

最初「なるほど~…ってUnicodeどこよ!」と迷ったので、こちらも覚えておきましょう。
アイコンの個別ページ、fa-○○の右側にUnicodeがあります。

fontawesome-unicode

これで:before or :afterにFont Awesomeが使えます。やったね!

スポンサーリンク

お役に立ったらポチッとお願いします

おおつかをフォローしてみる

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です