しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

アイコンを CSS でテキストのように表示 - Font Awesome

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

アイコン的なものを CSS に埋め込む場合、普通にやったら画像として参照しないとだめそうです

・・・が、テキストみたいな使い心地でアイコンを埋め込めるサービスがあるらしい!

fontawesome.com

さっそく試してみる

まずは下記のページでメールアドレスを入力して、無料登録

https://fontawesome.com/start

font awesome

届いた仮登録メールのリンクをブラウザで開き、パスワード、かんたんなアンケートを英語で入力すればすぐに登録完了しました

まずは <head> タグ内でスタイルシートを参照しておく必要があるらしい

<head>
  <link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
</head>

バージョンのところは最新版にしておかないと、最新のアイコンは使えないっぽい

現時点の最新は v5.13.0 だったのでそちらを指定しました

さっそく下記のようなコードを書いてみた

<p><i class="fas fa-cat"> ねこきたー!</i></p>

ねこきたー!

出たー!でも小さい!

大きさを2倍にするにはこんな感じに書きかえればいいらしい

<p><i class="fas fa-cat fa-2x"> ねこきたー!</i></p>

ねこきたー!

できた・・・これはかんたんだ!