【スワロー】コピペでアイコンFont Awesome


このサイトは、WordPressテーマ「スワロー」を使っています。

→ 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>

あわせて読みたい

スワローで下線・太字・マーカーの【AddQuicktag】設定タグ

【コピペで簡単】スワローショートコード(53種類)Swallow