WordPress, PHP

WordPressで Font Awesomeを使えるようにする

Font Awesome利用の前提

  1. この記事は『WordPressでの子テーマのつくり方、管理法』を基に Twenty Seventeenをテーマとしていることを前提としているので、子テーマって何?って人はそちらの記事を先にどうぞ。
  2. Font Awesomeは Free CDNで Webフォント的にダウンロードせずとも使える仕様になっているが、今回は一式をダウンロードして自分のサーバにアップロードして使う方法を選択することに。

Font Awesomeのダウンロード

  1. 以下のFont Awesomeのサイトに行き、グリグリっとスクロールさせて以下の緑色部分をクリックするとダウンロードが開始される。

    (2018/09現在)
    Font Awesome に移動
  2. ダウンロードした fontawesome-free-5.2.0-web.zipを解凍。

Font Awesomeを使う準備

  1. 子テーマのディレクトリ(フォルダ)内に font-awesome ディレクトリを作成。
    /wp-content/themes/twentyseventeen-child/font-awesome
  2. その下に上記2.で解凍したディレクトリの下の /webfonts/ 全てと /css/ ディレクトリの中の all.min.css をコピー。

    (こんな感じ)
  3. functions.phpに以下を記述。

    子テーマ作成時に記述した theme_enqueue_styles() に追加するもよし。

Font Awesomeを使う

  1. あとは Font Awesomeで表示したいアイコンを探し、クリックで表示されるページのコード(タグ)をコピーして任意の場所に貼るだけ。

    (画面上部に表示されるタグをクリック)
  2. 以下のコードを貼り付けて
    <i class="far fa-smile"></i>
    このように 表示できたら成功。

 

関連記事
ブログランキング・にほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。