【スワロー】コピペでアイコン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>





あわせて読みたい

ワードプレスのコピペで簡単!【表の作成・HTMLタグ】
Vivid Sydneyこのサイトは、WordPressテーマ「スワロー」を使っています。いました。→ WordPressテーマ「スワロー」表をHTMLで作ってみます。コピペで、簡単に表を作ることができますよ~。table・・・表の枠 tr...

ワードプレスにコピペで簡単バッジ(CSS不要)関連・参考・あわせて読みたい・出典・おすすめ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。→ WordPressテーマ「スワロー」あわせて読みたい 参考 LINK サイトこのような ↑ バッジがあると見栄えもいいし、目立って読みやすくなりますよね。HTM...

スワローで下線・太字・マーカーの【AddQuicktag】設定タグ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。→ WordPressテーマ「スワロー」スワローで文字をこのように、・下線、・赤太字、・文字を小さく、文字を大きく、文字をもっと大きくしたり、マーカー装飾してみます...

【コピペで簡単】スワローショートコード(53種類)Swallow
このサイトは、WordPressテーマ「スワロー」を使っています。いました。→ WordPressテーマ「スワロー」スワローショートコードまとめです。ショートコードは、HTMLコードを呼び出す短縮コードです。 ブログカードブログカードとは、...
タイトルとURLをコピーしました