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

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

 

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

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

 

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

 

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

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

 

Font Awesome

 

利用方法

 

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

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

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

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

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

 

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

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

Luxelitas→カスタマイザーで CSSタブを選択すると下の方に設定項目があります。

「Font AwesomeオリジナルのCSS」と、「CDN」読み込みにチェックを入れます。
※デフォルトでは「Luxeritasで必要最小限のCSSのみ」になっています。

これで、以下の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">

 

現時点では、バージョンは v5.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です。

主な汎用アイコンまとめ

 

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

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ