LoginSignup
1

More than 3 years have passed since last update.

font-awesomeを駆使したい ❏HTML❏

Last updated at Posted at 2019-11-15

font-awesomeとは

ページ上にアイコンを表示させることができます。
こんなんです↓
ダウンロード (4).png

https://fontawesome.com/icons?d=gallery

無料だけでも1544種類あるので十分すぎると思います。

今回はCDNを使って実装します。
手順はたった2つです。

手順1

HTMLのheadタグ内に、
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
を貼り付ける。

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

headタグの一番下に貼り付けとけば大丈夫です。


hamlの場合↓

application.html.haml
%head%link{href: "https://use.fontawesome.com/releases/v5.6.1/css/all.css", rel: "stylesheet"}

手順2

使いたいアイコンのコードをコピーして表示させたい位置に貼り付けます。

例えばAmazonのアイコンの場合は、

ダウンロード (5).png

https://fontawesome.com/icons?d=gallery

上の方にあるコード
<i class="fab fa-amazon"></i>
をコピーして好きなところに貼り付ければOKです!



このアイコンはクラス名を振って、CSSで色や大きさを変更することも可能です。
font-awesomeを使ってデザインの幅を広げましょう!!



ではまた!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1