スポンサーリンク

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

Luxeritas

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

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

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

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

 

 

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

 場所  [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の場合 

 
 FontAwesome5の場合 

※アイコンの種類(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)という難病と闘っています。