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

7301 ワード
HTML CSS 初心者 FontAwesome HTML テキストリンク

はじめは使い方が分からなくて苦労したのに一日経ってやってみたらあっさり出来たので、忘れない内にまとめます。
[参考サイト]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(ユニコード)をコピペ　頭に￥(スラッシュ)を忘れずに！

ブラウザ上では

このように表示されました。
では色とサイズを変えてみましょう。

④色を変える

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

colorプロパティを指定することで色を変更できます。

色が変わりました。

⑤サイズを変える

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名にサイズを加えることで変更出来ます。