スポンサーリンク

【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月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM