WordPressなどのブログ作成時にFont Awesomeのアイコンを使用していて、サイズを調整したいと思ったことはありませんか？
HTMLコードを追記するだけで簡単に2倍、3倍とサイズを変更することができます。
この記事を読んで、用途に応じてアイコンのサイズを調整してみてください。
この記事はこんな方におすすめ
- Font Awesome のサイズの変更をしたい
- サイズ変更する際のHTMLコードを知りたい
Font Awesomeのサイズ変更方法
Font Awesomeのアイコンサイズを変更するには、HTMLコードに以下のようなコードを追記します。
| コード | サイズ |
|---|---|
| fa-sm | 0.75倍 |
| fa-lg | 1.33倍 |
| fa-2x | 2倍 |
| fa-3x | 3倍 |
| fa-4x | 5倍 |
| fa-5x | 7倍 |
コード記述例
<i class="fas fa-smile"></i>ホームアイコン 通常サイズ
<i class="fas fa-smile fa-2x"></i>ホームアイコン 2倍サイズ
上記のようにHTMLコードを追記するだけで、アイコンのサイズを変更することが可能です。
完成形のプレビューを確認しながら、適切なサイズのアイコンを表示させて、見やすい画面になるようにしましょう。
他にもWordPressに関する些細な悩みをすぐに解決する内容を公開しています。
こちらもCHECK
-
-
AFFINGER6でFont Awesome・Googleマテリアルアイコンの使用方法を解説
アイコンを利用する方法はいくつかありますので、複数説明していきます。 この記事はこんな方におすすめ AFFINGER6を購入して設定等がわからない人 AFFINGER6でアイコンを使用したい人 Fon ...
続きを見る
