スポンサーリンク

【Luxeritas】アイコンフォント(Font Awesome)の設定

2019年2月16日

  • 2019年12月07日
    Luxeritasバージョン3.7.1よりFont Awesomeに関する設定が変わったので追記しました。

WordPressテーマ『Luxeritas』でもアイコンフォント FontAwesomeが使われています。

ですが、デフォルトの設定ではLuxeritasで使用している必要最低限のアイコンフォントしか表示できないようになっています。

通常FontAwesomeを使う場合は<head>~</head>間にコードを挿入する必要があります。(CDN)

ですが、Luxeritasではテーマで使用しているアイコンフォント以外のアイコンフォントも使えるようにする設定ができます。(head内にコードを挿入する必要はありません。)

スポンサーリンク

FontAwesome(Free)を使えるようにする

Luxeritasバージョン3.7.1よりFont Awesomeに関する設定が変わっています。3.7.1より設定項目が増えています。

バージョン3.7.1以降

場所[Luxeritas][カスタマイズ][Font Awesome]タブ
  1. Font Awesome バージョン
    使用するFont Awesomeのバージョンを選択してください。
  2. Font Awesomeの設定
    • アイコンの読み込み方法
      Webフォント(Web Font+CSS)かSVGどちらかを選択してください。
      ⇒ Webフォントを選択
    • 下位互換
      バージョン4を使っていた方で①でバージョン5を選択した場合チェック
  3. CSSの設定(Web Font With CSS)
    • CSSの読み込み⇒「非同期(レンダリング高速)」
    • CSSの読み込み元 ⇒「ローカル」
    • フォントファイル本体の読み込み元 ⇒「CDN」
  4. SVGの設定(SVG With JavaScript)
    • JavaScriptの読み込み元 ⇒「CDN」
結耶
結耶

WebフォントかSVGで使用するのか選択できるようになりました。Webフォントで使用した方が使い易いと思うのでWebフォントで使用する方をオススメします。

バージョン3.7.1以前

場所[Luxeritas][カスタマイズ][CSS]タブ

少し下に『アイコンフォントのCSS』という項目があります。

赤枠の部分の設定をしてください。

FontAwesome バージョン
FontAwesomeのバージョン5または4のどちらかを選択してください。

バージョン4は旧バージョンなので「5」を選択した方がいいと思います。

注意
FontAwesome4をお使いの方がバージョン5を選択するとCSSなどのアイコンの指定方法を変更する必要があります。
FontAwesomeの構成
デフォルトでは「Luxeritasで必要最低限のCSSのみ」が選択されていますので、「FontAwesomeオリジナルのCSS」にチェックを入れてください。
FontAwesomeのフォントファイルの読み込み方法
『CDN』はFontAwesomeのサーバーからフォントファイルを読み込む方法です。設定はそのままでOKです。
きらり
きらり
設定したら[変更を保存]してくださいね。 これでLuxeritasで使用しているアイコンフォント以外のFontAwesomeのアイコンフォントが使えるようになります。
スポンサーリンク

FontAwesomeの使い方

FontAwesomeの使い方についてはこちらで紹介しています。

CSSでの指定方法

FontAwesome4と5ではCSSの指定方法が少し違います。なのでFontAwesome4をお使いの方が「5」を設定した場合はCSSの指定方法を変更する必要があります。

FontAwesome4の場合 
font-family: FontAwesome;
content: "\(アイコンのコード)";  /*アイコンのコード*/
FontAwesome5の場合 
font-family: "Font Awesome 5 Free";
content: "\(アイコンのコード)";  /*アイコンのコード*/
font-weight:(種類);  /*アイコンの種類*/

※アイコンの種類(font-weight)の指定:Solidの場合は『900』 、Regularは『400』を指定します。

バージョン5の方がちょっと指定が面倒になります。
「アイコンのコード」と「アイコンの種類」を確認してCSSを書き換えてください。

きらり
きらり
結耶、前に旧バージョンと両方使う方法書いてたでしょ!?Luxeritasでもできないの?
結耶
結耶
前のテーマの時ね。 Luxeritasでもやってみたけど…できることはできたけど、一部のLuxeritasで使われているアイコンフォントが表示されなくなる(^^;)

バージョン4と5を両方使えるようにできますが、旧バージョンの「4」は提供が終了してしまうかもしれません。 なので「5」にしておいた方が安心だと思います。

アイコンのコードや種類はアイコンページで確認してください。

FontAwesome5 
FontAwesome4 

最後に

アイコンフォントはみ出しや記事内で使えますので、設定を変えておいた方がいいと思います。

また、前にも書きましたが旧バージョン「4」はサービスが終了してしまうかもしれません。
4と5ではアイコンが少し違いますがこれを機に「5」にしておいた方がいいと思います。

LuxeritasではHEAD間にコードを挿入することなく使えるので、「使ったことない」という人でも手軽に使えますのでLuxeritasテーマを使ったら設定を変更してみてください。

他のテーマ、ブログサービスをお使いの場合のFontAwesome導入方法は以下の記事で紹介しています。

※FontAwesome以外のアイコンフォントの導入方法と使い方

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。