fontawesome 5 無料版 旧バージョンからの使い方メモ
ダウンロードからアイコン表示まで
1. ダウンロード
ダウンロードページから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>