読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:アイコンフォントとfont-FamilyのCSS指定でハマった話

アイコンフォントは画像ファイルを使用せずにアイコンを表示できるのですごく便利です。BootstrapやIonIconsなどで使用することができます。

f:id:tyoshikawa1106:20150411150208p:plain


iタグなどにclass指定するだけで簡単に利用できます。

f:id:tyoshikawa1106:20150411150708p:plain


Dev環境での勉強用ぐらいでしか利用したことがなかったのですが、ある日正常に表示されていないことに気づきました。

f:id:tyoshikawa1106:20150411150905p:plain


原因はFont-FamilyのCSS指定のやり方でした。apex:includeタグなどを利用したときTableタグ内など一部のタグにFont-FamilyのCSSが反映されないということがあったので、「*」を利用した全要素指定を行ってみたのですがこれがイマイチだったみたいです。

f:id:tyoshikawa1106:20150411151110p:plain


ということでアイコンフォントを利用するときはFont-FamilyのCSS指定の対象には注意が必要でした。

追記

not(i)でiタグを対象外にすることでひとまず回避できました。

#vf-page *:not(i) {
    font-family: "ProximaNovaSoft-Regular", Calibri, 
        "Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI", 
        Arial, sans-serif;
}