UTALI

みんなの役に立つ情報をどんどん公開していきます

FontAwesomeをCSSファイルから読み込んで利用する方法

無料で利用できるWebフォントとして有名なFont-Awesomeですが、その通常はCDNからロードして、HTMLのクラスに追記して、フォントを利用することが多いと思います。

でも、はてなブログのように直接HTMLを書き換えることができない場合など、CSSから特定の要素のbefore要素として、FontAwesomeのフォントを使うことがあると思います。

このような場合は以下のように、外部のCDNからフォントファイルを読み込んでから、contentの値として、各フォントを利用するといいと思います。

最初にこれでフォントをロードしてから・・

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

そしてフォントを利用した部分で該当するフォントをcontentで指定します。

.hoge::before{font-family: FontAwesome;
   content:"\f011"}