1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Font Awesomeの使い方

Posted at

#Font Awesome とは
ウェブサイトなどでアイコンを文字として扱うことを可能にしたツールです。画像ではなく文字なので、大きさや色などを変更することができます。

#Font Awesomeの使い方
##headタグに追加
以下のコードをheadタグ内に貼付けます。

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

#使いたいアイコンフォントを探す
Font Awesomeの公式サイトから使いたいアイコンフォントを探します。
https://fontawesome.com/

(無料プランでは濃いグレーで表示されているアイコンのみ使用できます。)
使いたいアイコンをクリックしてアイコンの詳細ページを開きます。

#使いたいアイコンフォントのコードをコピーする
<i class="fas fa-camera"></i> のようなコードをそのままコピーします。

#アイコンをHTML内の表示させたい位置に貼付ける
例えば、以下のように貼り付けます。

<span><i class="fas fa-camera"></i></span>

cssで大きさや色などを変更することができます。

1
0
0

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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?