fontawesome 5 無料版 旧バージョンからの使い方メモ

ダウンロードからアイコン表示まで

1. ダウンロード

fontawesome_200512_01

ダウンロードページからzipファイルをダウンロードします。

2. アップロード

ダウンロードしたzipファイル内の/css/all.css/webfontsフォルダをFTP上のfontawesomeフォルダにアップロードします。
その後、内にall.cssを読み込みタグを追加します。

通常のサイトの場合

  • CSSファイル https://example.com/css/fontawesome/css/all.css
  • フォントファイル https://example.com/css/fontawesome/webfonts/

<head>
  <!-- 下記のコードを追加 -->
  <link rel="stylesheet" href="https://example.com/css/fontawesome/css/all.css">
</head>

WordPressのサイトの場合

  • CSSファイル https://example.com/wordpress/wp-content/themes/themefolder/css/fontawesome/css/all.css
  • フォントファイル https://example.com/wordpress/wp-content/themes/themefolder/css/fontawesome/webfonts/

<head>
  <!-- 下記のコードを追加 -->
  <link rel="stylesheet" href="https://example.com/wordpress/wp-content/themes/themefolder/css/fontawesome/css/all.css">
</head>

大きさ・色の変更

サイズを変える

class属性に.fa-xs.fa-smなどを加えることで、アイコンのサイズを変更することができます。


<i class="fas fa-apple-alt fa-xs"></i>
<i class="fas fa-apple-alt fa-sm"></i>
<i class="fas fa-apple-alt fa-lg"></i>
<i class="fas fa-apple-alt fa-2x"></i>
<i class="fas fa-apple-alt fa-3x"></i>
<i class="fas fa-apple-alt fa-5x"></i>
<i class="fas fa-apple-alt fa-7x"></i>
<i class="fas fa-apple-alt fa-10x"></i>

横幅を揃える (固定幅)

class属性に.fa-fwを加えることでアイコンの横幅を揃えることができます。





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

<i class="fas fa-apple-alt fa-2x fa-fw"></i>
<i class="fas fa-bicycle fa-2x fa-fw"></i>

アイコンを回転する







  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note