このサイトは、WordPressテーマ「スワロー」を使っています。いました。
スワローは、Font Awesome5（無料版）のアイコンが使えます。
Font Awesome とは
文字と同じように使えるアイコンで、
色もサイズも自由に変えることができます。
こんな感じに、
枠で囲んだり、動かすこともできます。
無料で使えるかわいいアイコンがたくさんあります。
Font Awesome5を使う時のコード
まずは、Font Awesome5を使う時のコード ↓ これをHTML編集画面に付けます。これで、フォントのデータを読み込んでくれます。
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
次に、お好きなアイコンのコード（無料）をコピーします。（PROは有料）
アイコンフォントのコードをコピー
アイコンをクリックすると、<i class=” “></i> があるので、
<i class=” “></i> ←この場所をコピーしてください。
←この猫ちゃんの場合、<i class=”fas fa-cat”></i>
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fas fa-cat”></i>
アイコンの大きさ
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fab fa-bitcoin fa-lg”></i>
<i class=”fab fa-bitcoin fa-2x”></i>
<i class=”fab fa-bitcoin fa-3x”></i>
<i class=”fab fa-bitcoin fa-4x”></i>
<i class=”fab fa-bitcoin fa-5x”></i>
<i class=”fab fa-bitcoin fa-6x”></i>
<i class=”fab fa-bitcoin” style=”font-size:96px;color:yellow”></i>
アイコンの大きさは
fa-lg , fa-2x , fa-3x , fa-4x , fa-5x , fa-6x を付け加えると大きさが変わります。
style=”font-size:96px;color:yellow で 色、サイズを変える方法もあります。
アイコンの色を変える
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fas fa-highlighter”></i>
<i class=”fas fa-highlighter” style=”color:blue”></i>
<i class=”fas fa-highlighter” style=”color:red”></i>
<i class=”fas fa-highlighter” style=”color:orange”></i>
<i class=”fas fa-highlighter” style=”color:green”></i>
<i class=”fas fa-highlighter” style=”color:pink”></i>
<i class=”fas fa-highlighter” style=”color:grey”></i>
<i class=”fas fa-highlighter” style=”color:brown”></i>
<i class=”fas fa-highlighter” style=”color:gold”></i>
<i class=”fas fa-highlighter” style=”color:yellow”></i>
<i class=”fas fa-highlighter” style=”color:teal”></i>
<i class=”fas fa-highlighter” style=”color:purple”></i>
<i class=”fas fa-highlighter fa-3x” style=”color:pink”></i>
style=”color: ” に色を指定します。最後のピンクは、fa-3x で大きくしてみました。
ボタンタイプ
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<a href=”https://fromau.net”><button style=”font-size:24px”><i class=”far fa-hand-point-up”></i> Click</button></a>
上の <a href=”https://fromau.net“> に、リンク先を入れてください。ここでは、このサイトのURL （https://fromau.net）を入れています。
回転させる
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fas fa-drafting-compass”></i>
<i class=”fas fa-drafting-compass fa-spin”></i>
<i class=”fas fa-drafting-compass fa-pulse”></i>
fa-spin、fa-pulse を付けます。
角度を変える
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fas fa-fish”></i>
<i class=”fas fa-fish fa-rotate-90″></i>
<i class=”fas fa-fish fa-rotate-180″></i>
<i class=”fas fa-fish fa-rotate-270″></i>
fa-rotate-90、fa-rotate-180、fa-rotate-270 を付けます。
反転させる
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fas fa-dragon”></i>
<i class=”fas fa-dragon fa-flip-horizontal”></i>
<i class=”fas fa-dragon fa-flip-vertical”></i>
fa-flip-horizontal、fa-flip-vertical を付けます。
アイコンを囲んで角度をつける
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<i class=”fas fa-child”></i>
<i class=”fas fa-child fa-border”></i>
<i class=”fas fa-child fa-border fa-rotate-180″></i>
<i class=”fas fa-child fa-border fa-rotate-270″></i>
fa-border, fa-border fa-rotate-180, fa-border fa-rotate-270 を付けます。
重ねる
HTMLコード
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<span class=”fa-stack fa-lg”>
<i class=”fa fa-camera fa-stack-1x”></i>
<i class=”fa fa-ban fa-stack-2x text-danger” style=”color:red;”></i>
</span>
あわせて読みたい
