スポンサーリンク

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

2019年2月16日Luxeritas

  • 2020年5月7日
    見直しによる書き換えと追記をしました。
  • 2019年12月07日
    Luxeritasバージョン3.7.1よりFont Awesomeに関する設定が変わったので追記しました。

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

通常FontAwesomeを利用するにはアイコンを読み込むためのコードを<head>~</head>間に挿入する必要があります。

ですが、LuxeritasではFont Awesomeを自分で導入しなくても使えるようになっています。なので今回はLuxeritasのFont Awesomeの設定方法について紹介します。

Luxeritas以外のテーマをお使いの方やWordPress以外のWebサービスをお使いの方は以下の記事を参考にしてください。

スポンサーリンク

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

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

バージョン3.7.1以降

場所[Luxeritas][カスタマイズ][Font Awesome]タブ
Font Awesome バージョン

使用するFont Awesomeのバージョンを選択してください。

「バージョン4」は更新されていません。最新のアイコンを使うためにも「バージョン5」をおすすめします。

Font Awesome5の設定
「バージョン5」を選択した方のみ

アイコンの読み込み方法
Webフォント(Web Font+CSS)かSVGどちらかを選択してください。

結耶
結耶

私的には「Webフォント(Web Font+CSS)」の方が扱いやすいと思います。

下位互換

バージョン4を使っていた方で①でバージョン5を選択した場合チェックしてください。

CSSの設定(Web Font With CSS)
「バージョン4」「バージョン5でWebフォント」を選択した方は設定してください。

CSSの読み込み
「非同期(レンダリング高速)」がいいかと思います。

CSSの読み込み元
「CDN」または「ローカル」を選択してください。

「CDN」はFont Awesomeのサーバーから、「ローカル」は自分のサーバーから呼び出します。ここは「CDN」にした方がいいと思います。

フォントファイル本体の読み込み元
こちらも「CDN」にしておくといいと思います。

SVGの設定(SVG With JavaScript)
「バージョン5」で「SVG」を選択した方のみ設定してください。

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 

SVGで表示している場合

「バージョン5」で「SVG」を選択している場合はCSSの指定のさいにdisplay:none;を追加する必要があります。

詳しくはこちらを参考にしてください。

最後に

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

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

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

※Font Awesome以外のWebフォント

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

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