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

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

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

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

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

ということでアイコンフォントを利用するときは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;
}