Help us understand the problem. What is going on with this article?

HTML CSS 【Font Awesome】を使ってみる

はじめは使い方が分からなくて苦労したのに一日経ってやってみたらあっさり出来たので、忘れない内にまとめます。
[参考サイト]https://webdesign-trends.net/entry/8351
Font AwesomeをHTMLとCSSで読み込む方法でやってみました。


①<head>タグ内に入れる

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Font Awesomeを使ってみる</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  </head>
</html>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">を<head>内に入れる

②使うアイコンを選ぶ

[アイコンを探す]https://fontawesome.com/icons?d=gallery
リンク先から使いたいアイコンを探す(当然英語で!)

[日本語で入力すると検索してくれるサイト]https://search-fa.com/

③アイコンを表示させる

  • 使いたいアイコンを選んだら<i class=>というのがあるのでクリックしてコピーして、HTML内で使うところにペースト
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Font Awesomeを使ってみる</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  </head>

  <div class="icon-test">
    <i class="fab fa-facebook-square" style="color:#305097;"></i>
  </div>
</html>
  • 次にCSSで疑似要素に下記のように追加
styles.css
.fab fa-facebook-square::before {
    content:'\f082';
    font-family:'Font Awesome 5 Free';
    font-weight:900;
}

contentにアイコンのUnicode(ユニコード)をコピペ 頭に¥(スラッシュ)を忘れずに!

ブラウザ上では
20191021_Qiita01.jpg
このように表示されました。
では色とサイズを変えてみましょう。

④色を変える

index.html
  <div class="icon-test">
    <i class="fab fa-facebook-square" style="color:#305097;></i>
  </div>

colorプロパティを指定することで色を変更できます。
20191021_Qiita02.jpg
色が変わりました。

⑤サイズを変える

index.html
  <div class="icon-test">
    <i class="fab fa-facebook-square fa-xs" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-sm" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-lg" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-5x" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-10x" style="color:#305097;"></i>
  </div>

class名にサイズを加えることで変更出来ます。
20191021_Qiita03.jpg

a-takano
WEB業界に未経験転職して5ヶ月が経ちました! 新規投稿・投稿した記事の更新は1週間に一度はやっています。←最近は更新頻度が急落しています… WordPress始めました。
sunseer
ソリューション型システム開発として、大手中古車ポータルサイトの構築や、BtoB Java開発・AWSクラウド構築・AI/RPAなどのIT技術支援を行う会社です。
https://www.sunseer.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした