アイコンフォント「FontAwesome」の使い方
アイコンフォント「FontAwesome」の使い方
FontAwesomeの使い方
アイコンフォント「FontAwesome」とは？
アイコンフォントはWebフォントのアイコン版で、フォント同様にサイズ・色変更をCSSで調整することができます。以前のFontAwesomeではWebフォントはCSS、SVGはjavascriptで表示させてましたが、現在はJavaScriptのみでCSSかSVGを表示させる仕様となっています。
アイコンの種類も豊富にあり、Free版でも1,544種類のアイコンから選択することができ、以下のようによく使用されそうなアイコンも数多く用意されてます。
ソーシャル・PC系アイコン
ビジネス系アイコン
ブログ系アイコン
ショップ系アイコン
FontAwesomeのユーザー登録
FontAwesomeのサイトにアクセスに中央の「Start for Free 」ボタンをクリックします。
次に入力フォームにメールアドレスを入力して「Send Kit Code」ボタンをクリックします。
確認メールが入力したメールアドレス宛てに届くので「Click to Confirm Your Email Address + Set Things Up」をクリックします。表示されたページで、名前・パスワードを設定しユーザー登録完了です。
FontAwesome導入の準備
ログイン後に各kitsページに記載されているJavaScriptをコピーし、アイコンを表示させたいサイトのhead内にリンクを貼り付けて準備完了です。
<script src="https://kit.fontawesome.com/あなたのKit ID.js" crossorigin="anonymous"></script>
SVGで表示させたい場合
WebフォントではなくSVGで表示させたい場合は各Kitsページの右上にある「Settings」をクリックします。
SettingsページのTechnologyからSVGを選択して「Save Changes」をクリックします。
その他にSettingsではキット名・FontAwesomeのバージョンも変更することが可能です。
FontAwesomeの使用方法
FontAwesomeのIconsページから使用したいアイコンを探します。Free版で使用する場合は左メニューの「Free」をクリックすると検索しやすくなります。
使用したいアイコンが見つかったらアイコン詳細ページからコードをコピーし、表示させたい箇所にコードをペーストします。
<i class="fab fa-twitter"></i>
アイコンのカラーを変更する
アイコンのカラーはCSSで簡単に変更することができます。
<span style="font-size: 3em; color: Tomato;"> <i class="fas fa-stroopwafel"></i> </span> <span style="font-size: 3em; color: Dodgerblue;"> <i class="fas fa-stroopwafel"></i> </span> <span style="font-size: 3em;"> <span style="color: Mediumslateblue;"> <i class="fas fa-stroopwafel"></i> </span> </span>
アイコンのサイズを変更する
FontAwesomeでサイズのclassが用意されているのでサイズを変更したい場合はclassにfa-xsfa-smfa-lgfa-2x～fa-10xを追加します。
もちろんオリジナルのCSSを追加しfont-sizeでサイズを変更することもできます。
<i class="fas fa-stroopwafel fa-xs"></i> <i class="fas fa-stroopwafel fa-sm"></i> <i class="fas fa-stroopwafel fa-lg"></i> <i class="fas fa-stroopwafel fa-2x"></i> <i class="fas fa-stroopwafel fa-3x"></i> <i class="fas fa-stroopwafel fa-5x"></i> <i class="fas fa-stroopwafel fa-7x"></i> <i class="fas fa-stroopwafel fa-10x"></i>
| fa-xs | .75em |
|---|---|
| fa-sm | .875em |
| fa-lg | 1.33em (vertical-align: -25%) |
| fa-2x～fa-10x | 2em～10em |
アイコンの向きを変更する
角度のclassを追加することで角度(90°/180°/270°)反転(水平/垂直)を変更することができます。
<i class="fab fa-font-awesome"></i> <i class="fab fa-font-awesome fa-rotate-90"></i> <i class="fab fa-font-awesome fa-rotate-180"></i> <i class="fab fa-font-awesome fa-rotate-270"></i> <i class="fab fa-font-awesome fa-flip-horizontal"></i> <i class="fab fa-font-awesome fa-flip-vertical"></i>
| fa-rotate-90 | 90° |
|---|---|
| fa-rotate-180 | 180° |
| fa-rotate-270 | 270° |
| fa-flip-horizontal | 水平(横)に反転 |
| fa-flip-horizontal | 垂直(縦)に反転 |
アイコンを回転させる
ローディングアニメーションで使えそうな回転するアイコンもclassにfa-spinを追加するだけで機能します。
fa-pulseにすると、8ステップで1回転するアニメーションとなります。
<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i>
アイコンを使ったメニュー
ナビゲーションメニューもアイコンを配置するだけで視覚的にイメージが伝わりやすくなります。
.icon02 ul{
list-style:none;
border:solid 1px #DDD;
border-bottom:none;
}
.icon02 li a{
color:#666;
display:block;
border-bottom:solid 1px #DDD;
padding:10px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.icon02 li a:hover{
background-color:#F2F2F2;
}
<div class="icon02"> <ul> <li><a href="#"><i class="fas fa-home"></i> Home</a></li> <li><a href="#"><i class="fas fa-building"></i> Coporate</a></li> <li><a href="#"><i class="far fa-handshake"></i> Business</a></li> <li><a href="#"><i class="far fa-envelope"></i> Mail</a></li> </ul> </div>
疑似要素で使用する
CSSの疑似要素::before::afterでアイコンを表示させることもできます。CSS(Webフォント)FREE版での使用方法を紹介します。
アイコンを使用したい疑似要素::beforeにfont-family: "Font Awesome 5 Free";とUnicodecontent: "\f099"を記述します。
Unicodeは各アイコンページにてコピーできます。
twitterやfacebookなどのブランド系アイコン(classfab)を使用する場合はfont-family: "Font Awesome 5 Brands";となります。各アイコンのfont-familyの記述は以下のようになってます。
| Solid (Free) | Font Awesome 5 Free or Font Awesome 5 Pro (for pro users) |
|---|---|
| Regular (Pro) | Font Awesome 5 Pro |
| Light (Pro) | Font Awesome 5 Pro |
| Duotone (Pro) | Font Awesome 5 Duotone |
| Brands (Free) | Font Awesome 5 Brands |
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.login::before {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
}
.tps::before {
font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
}
.twitter::before {
font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f099";
}
.icon01 ul{
list-style: none;
display: flex;
}
.icon01 li {
width: 33%;
text-align: center;
background-color:#666;
height: 50px;
line-height: 50px;
margin:0 2px;
}
.icon01 li a{
display: block;
color: #fff;
}
.icon01 li a:hover{
background-color:#999;
}
<div class="icon01"> <ul> <li><a href="#"><span class="icon login"></span> Login</a></li> <li><a href="#"><span class="icon tps"></span> TPS Reports</a></li> <li><a href="#"><span class="icon twitter"></span> Twitter</a></li> </ul> </div>
しかし、現バージョンのFontAwesomeでは不具合なのかfont-family: "Font Awesome 5 Free";の記述ではアイコンが表示されません。ちなみにfont-family: "Font Awesome 5 Pro";では問題なく表示されます。ドキュメントの例ではfont-family: "Font Awesome 5 Free";で表示できるとなってますがCSS Pseudo-elementsは、しばらく更新されていないようです。
以前のバージョンと比べ、機能が増えてだいぶ進化しているようですね。無料で簡単にアイコンを表示することができるので、興味のある人は使用してみてはいかがでしょうか。以上、アイコンフォント「FontAwesome」の使い方でした。
PRO版は合計7,365のアイコンが使用することができ、アイコンの種類はSolid・Regular・light・Duotoneと4タイプ用意されています。