Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@a-takano

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

More than 1 year has passed since last update.

はじめは使い方が分からなくて苦労したのに一日経ってやってみたらあっさり出来たので、忘れない内にまとめます。
[参考サイト]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

6
Help us understand the problem. What is going on with this article?
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
a-takano
転職してコーダーやったり、ちょっと営業ぽいことやったり、ECサイトの勉強したり。 HTML/CSS/Javascript/WordPress 最近はコーディングをしていないのでいろいろ忘れている・・・

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?