三浦春馬

Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法

2019-02-27Otherアイコンフォント

当サイトでは　Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用に基づいています。

Ver.4.7を使っておられる方で、アイコンフォントを探したい場合は以下をご覧ください。

 

Font Awesome Ver.6　について

2020年6月　追記

Font Awesome 6　がリリースされました。自身が使っているテーマで、アイコンフォント利用が可能な場合は、テーマの対応を待ちましょう。

自分で読み込んでいる、またはダウンロードしている場合は、コードの変更や再ダウンロードが必要になるかもしれません。

Font Awesome6

 

 

Font Awesomeアイコンフォントって？

「Font Awesome」はアイコン版のWebフォントで、フリーとプロ（有料）があります。

フリーのものだけでSNSのアイコンや、メール、ホーム、ショップ用など様々な使いやすいアイコンを含む1,500種類ほどあり、誰でも自由に使えます。

 

Font Awesome

 

 

利用方法

  1. CDN利用
  2. 自サーバへアップロード

CDNでの利用とは、フォントのあるサーバーから読み込んで利用する形式です。

フォントをダウンロードして、自サーバーへアップロードしても使えますが、手間や負荷を考えると、CDNを利用した方が簡単で便利です。

指定のCSSファイルへのリンクを追記する事で、サイト内のCSSでカスタマイズしながら利用出来ます。

通常のフォント同様、サイズや色も編集できます。

 

ルクセリタスをお使いの方へ

ルクセリタスには「Font Awesome」対応機能があり、設定にチェックを入れるだけで利用可能です。

Luxelitas→カスタマイズ　から　Font Awesomeタブを選択すると設定項目があります。

ルクセリタス：アイコンフォントの設定

初期値：Font Awesome 5

バージョンについては、以前からアイコンフォントを利用していて、Ver.5.0以前のものを利用している場合を除き、「Font Awesome 5」にチェック。

 

ルクセリタス：アイコンフォントの設定

初期値：Web Font（CSS）

アイコンの読み込みは、利用しているアイコンフォントが少ない場合は「SVG（JavaScropt）」でもOK。

 

ルクセリタス：アイコンフォントの設定

初期値：CDN

CSSは「CDN」で。

 

これで、以下のCSSリンクを貼るの項は必要ありません。

 

CSSリンクを貼る

https://fontawesome.com/start

 

　以下のコードを<head></head>内に貼り付ける事で利用できます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

 

現時点では、バージョンは　ｖ5.7.2　となっています。

https://use.fontawesome.com/releases/v5.7.2/css/all.css

バージョンアップがあり、新規フォントが追加された時に新しいフォントを使いたい場合は、このバージョン部分の数字を変更する必要があります。

 

アイコンフォントを使う

Font Awesomeフリーフォント

上記リンクより、使いたいフォントを選びます。

 

　選択すると、アイコン詳細画面が開きます

 

　上にコードが出ていますのでクリックするとコピー出来ます

　コピーしたコードをテキスト（HTML）編集で貼り付けます。

 

<i class="fas fa-apple-alt"></i>

 

コードが消えてしまう場合

 

ビジュアルエディタ画面に戻るとWordPressのエディタ機能で自動でコードを置き換えたりしますが、その際にコードが消えてしまう事があります。

その場合は以下のように「&nbsp; 」を記述してみて下さい。

<i class="fas fa-apple-alt">&nbsp;</i>

 

いずれにしてもビジュアルエディタ画面ではアイコンフォントが表示されないので、「プレビュー画面」で確認します。

 

大きさを変える

 

対象アイコンでコピーしたコードにサイズ指定を追記することで簡単に変更可能です。

  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)
<i class="fas fa-apple-alt fa-lg">&nbsp;</i>

      

 

向きを変える・回転させる

  • fa-rotate-90　90°
  • fa-rotate-180　180°
  • fa-rotate-270　270°
  • fa-flip-horizontal　水平反転
  • fa-flip-horizontal　垂直反転
  • fa-spin　回転

サイズ変更と同様に、上記のコードを追記します。

<i class="fas fa-apple-alt fa-rotate-90">&nbsp;</i>

 

<i class="fas fa-apple-alt fa-spin">&nbsp;</i>

 

色を変える

 

HTMLだけで変える

色を変えたい場合は、CSSを利用しますが、テーブルなどに組み込めば、HTMLだけでも可能です。

　Twitter
f099
<i class="fab fa-twitter"></i>

 

上記の例だと、以下のように記述しています。

<table width="100%">
<tbody>
<tr>
<td style="background-color: #55acee; color: #ffffff; height: 44px;" colspan="2"><i class="fab fa-twitter fa-2x"></i>　<a style="color: #ffffff;" href="https://twitter.com/" target="_blank" rel="noopener">Twitter</a></td>
</tr>
<tr>
<td width="30%">f099</td>
<td width="70%">
<pre class="lang:default decode:true">&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;</pre>
</td>
</tr>
</tbody>
</table>

 

CSSで変える

 

スタイルシートにCSSで装飾を記述する事でも、簡単に色やサイズを変えて利用できます。

CSS

.ic_red {color:red;}

HTML

<i class="fas fa-apple-alt fa-3x ic_red"></i>

 

疑似要素で変える

 

フォントの指定には、以下のUnicodeを使います。（例：f5d1）

 

　注意点
  • バックスラッシュ（＝#）をつけてUnicodeを指定
  • font-weightを指定する

 

CSS

.apple:before {
font-family: "Font Awesome 5 Free";
content: "f5d1";
font-weight: 900;
}

HTML

<div class="apple">リンゴです</div>

 

リンゴです

HTMLは<div>でも<span>でもOKです。

 

font-weightの指定

上記のCSSでも記載している「font-weight: 900;」についてですが、

reguler　が　400、solid　が　900です。

メールアイコンの例（fas fa-envelope、f0e0）

　Reguler
.envelope_reguler::before {
	font-family: "Font Awesome 5 Free";
	content: "f0e0";
	font-weight: 400;
}
　Solid
.envelope_solid::before {
	font-family: "Font Awesome 5 Free";
	content: "f0e0";
	font-weight: 900;
}

※「Solid」が優先される。また、Regulerがないアイコンもある。

主な汎用アイコンまとめ

 

以下に使うことが多そうなアイコンをまとめていますので、参考にして下さい。

関連記事

Otherアイコンフォント

Posted by 綾糸