2022/07/12

【WordPress】WordPressでfont-awesomeを使用するときに気をつけること

WordPressでfont-awesomeを使用するときに気をつけること

HTMLとCSSだけでコーディングしているときは普段通りにHTMLのheadタグ内に記述すれば問題ないですが、WordPress化する際にfont-awesomeのアイコンなどが読み込まれずエラー表示になることがあります。

またPC表示は大丈夫でも、iPhoneなどスマホで確認してみると表示されないこともあると思います。

そんなときはlinkタグをHTMLに記述するのではなく、CSSに＠importして読み込みすると問題は解決されます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- reset -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  <!-- google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap" rel="stylesheet">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!--  -->
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>

CSS

@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");

こちらはSCSSで記述したものがCSSにコンパイルされたCSSファイルですが、CSSファイルの上部にき「@import url(“”)」で記述すればOK。

WordPressにURLを記述する際は「https://〇〇〇〇〇〇」の「https:」の部分を取り除いた方がいいらしいけど、理由は忘れた。

SCSS

@use 'global';
@use 'module';
@use 'parts';
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");

SCSSファイルに記述する際は、sassファイル直下のstyle.scssにCSSと同様に「@import url(“”)」で記述。

font-awesomeのCDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
READ MORE IN BLOGS