Safariでサイトを開いたときにMaterial Iconsのアイコンが表示されない時の対処法

コーディングして、ブラウザで確認する際に「Safariだけアイコンが表示されない！」といった問題に直面したことはありませんか？

その問題、CSSに記述を追加するだけで対応できます！

目次

• 前提条件
• Safariでアイコンを表示させる方法
• 「長いスタイルをいちいち書かないといけないの？めんどくさ！」と思ったらSCSSを使おう。
• まとめ

前提条件

この記事を理解するにあたって

• アイコンフォントがきちんと読み込まれている
• Google Chromeでは表示されているが、Safariで表示されなくなった
• Bootstrapでもこの方法で治るかも（治らないかも）

という前提がある上でお読みください。

そもそもアイコンフォントが読み込めていない方は別の問題があると考えられるので、この記事の対象外になりますのでご注意ください。

マテリアルアイコンの導入は以下のGoogle Fonts内からできますので、ぜひご利用ください。

https://fonts.google.com/icons?selected=Material+Icons

Safariでアイコンを表示させる方法

早速ですが、Safariでアイコンを表示させる記述を紹介します。

Material Iconsを指定する際に逐一、下部のの7行を追加します。

selector::before {
  font-family: 'Material Icons';  
  content: "chevron_right";
  /* 他のスタイルは割愛 */

  /* 以下、Safariで表示させるプロパティ */
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

「長いスタイルをいちいち書かないといけないの？めんどくさ！」と思ったらSCSSを使おう。

この記述、コピー＆ペーストしてわざわざ貼り付けるの、面倒ですよね。

そんな時はSCSSの「@mixin」をうまく活用しましょう。

@mixinを活用することで同じスタイルを別の場所でも流用できるので非常に便利です。

今回はファイル分けをせずに作成する方法を紹介しますね。

// あらかじめ@mixinでgetMaterialIconsを宣言（引数は使用するアイコンを指定）
@mixin getMaterialIcons($content) {
  font-family: 'Material Icons';
  content: $content; // 指定した引数
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

selector {
  // 色々なスタイル

  &::before {
    // @includeで作成したgetMaterialIconsを使用
    @include getMaterialIcons("schedule");
    
    // その他のスタイルをここに記述
 
  }
}

わざわざ「font-family: ‘Material Icons’;」を記述するのも面倒なので、@mixinに入れてしまいましょう。

これで完璧です！！！

まとめ

今回はアイコンフォントがSafariで表示されない場合の対処法を紹介しました。

• CSSで7行を追加
• 面倒であればSCSSで作ってしまおう

@mixinは関数的に使用できるので、SCSSを使用しているのであればバンバン使っちゃいましょう。