フリーランスが会社員収入を継続して得られないパターン7つ

fontawesomeを擬似要素で使う方法【コピペ】

fontawesomeを擬似要素で使う方法を紹介します。

fontawesomeを擬似要素で使う場面

例えば、ボタンの四角の右端に、fontawesomeの矢印「→」を入れたいというときに使うことができます。

font awesomeを擬似要素に使う方法【コピペOK】

まずfontawesomeの読み込みが必要です

<head>内でfontawesomeのCDNを読み込みましょう。自分の使いたいアイコンのバージョンに合わせてバージョンを書きましょう。2つのバージョンのCDNを書いたり、使いたいアイコンと異なるバージョンのCDNを書くとうまく表示されない場合があります。

 

HTML

CSS

font awesomeを擬似要素に使う方法解説

まずはbtnタグを「position:relative;」にします。

 

次にbtnの擬似要素に、「position: absolute;」と、top:XXpx;などで配置を設定します。

 

最後に、fontawesomeの入れたいアイコンの記号(アイコンページに行くとわかります)と、fontfamilyを設定して完了です。