文系40代♀がIT企業を目指すブログ

40代になり本格的にプログラミングの勉強をはじめてみました。なんとかしてお金にならないかと考えながらがんばっています。

Font Awesomeで肉球アイコンを取得

ヘッダーのメニューに肉球アイコンをつけたいなーとふと思い、前に少しだけ使ったFont Awesomeを開いてみました。

fontawesome.com

ちなみにこれがただのテキストメニュー

f:id:whiteandpeach:20190825082135j:plain

この文字の前に肉球つけたい!

 

実は前は自分ちの肉球を使って画像として貼り付けてたんですが、今回はこちらの肉球を借りることにしました。

 

英語のサイトなので一見使えるのかと思ったけど、「icons」さえ読めれば使えます。

f:id:whiteandpeach:20190825082539j:plain

 

 

「paw」と検索したら肉球がいくつか出てきました!

f:id:whiteandpeach:20190825082834j:plain

シンプルな一番最初に肉球で決まり!

 

 

私の場合は、ただ小さなアイコンをテキストの横につけたいだけなので、簡単なやり方で。

 

1.コードを貼り付ける

<head>~</head>に以下のコードをコピー

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

 

2.アイコンのコードを取得

f:id:whiteandpeach:20190825083407j:plain

f:id:whiteandpeach:20190825083557j:plain

3.つけたいところ(今回はHTML)に以下のコードをコピペ

<i class="fas fa-paw"></i>

を入れるだけ。

f:id:whiteandpeach:20190825083725j:plain

できました!

カスタマイズでアイコンを大きくしたり、動かしたりできるそうです。

CSSで調整することもできるそうです。

以下のサイトを参考にしました。

saruwakakun.com

 

SNSのアイコンもFont Awesomeで取得できるそうなので、今後も使っていきたいと思います。