Zenn
📷

★初めてのFontAwesome★html/css編★

2020/10/18に公開
CSS
HTML
React
Font Awesome
font
tech

私はFontAwesome。
簡単にアイコンなどを追加できる便利なサービスだよ。

例えば、googleやfacebookなどをはじめとした約1,600個のアイコンを無料で使えるよ。

ちなみに有料プランなら約7,800個を使えるよ。

詳細は、fontawesome.comを見てね。
(。´・ω・)ん?なに？英語は読めないって？

それならgoogle先生に翻訳してもらえばいいじゃないか！！
しょうがないな～。ここでは簡単な使い方を紹介するね。

使いたいアイコンを決めよう

fontawesome.comの検索バーから検索しよう。
ここではgoogleを例に上げるね。

googleのアイコンが出てくるから好みのアイコンをクリックしてね。
もしなければFont Awesomeを使うのは諦めて、アイコンを自作してね。面倒だと思うけど。

<i class="fab fa-google"></i>をコピーしといてね。
あとからこれを使うよ。

準備

登録

ここからはメールアドレスの登録が必要だよ。
https://fontawesome.com/startで登録してね。

登録が終わったら以下の画面が出るのでscriptタグをコピーしようね。
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

xxxxxxxxxx.jsはアカウントやプロジェクト毎に変わるので注意してね。
さ～、次からhtmlに組み込んでいくよ！！

インポート

<head></head>内にコピーしたscriptタグを組み込みんでね。

<html>
 <head>
  <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
 </head>

 <body>
 </body>
</html>

実装

さ～いよいよ、実装していきますよ。
<body></body>内に選んだアイコンのiタグを張り付けてね。

<html>
 <head>
  <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
 </head>

 <body>
  <i class="fab fa-google"></i>
 </body>
</html>

これで完成だよ～。
あとはオプションで大きさそろえたり向きを変えたりいろいろできるから、気になる人は続きを見てね。

オプション

良く使うオプション

サイズの変更

大きくしたいときもあるよね。
そんなときはclass属性にfa-XXを追加してみようね。

<i class="fab fa-google fa-xs"></i>
<i class="fab fa-google fa-sm"></i>
<i class="fab fa-google fa-lg"></i>
<i class="fab fa-google fa-2x"></i>
<i class="fab fa-google fa-3x"></i>
<i class="fab fa-google fa-4x"></i>
<i class="fab fa-google fa-5x"></i>
<i class="fab fa-google fa-6x"></i>
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-8x"></i>
<i class="fab fa-google fa-9x"></i>
<i class="fab fa-google fa-10x"></i>

サイズ間の統一

異なるアイコンを複数使うときに横サイズがバラバラになることがあるんだよね。
仕様だからしょうがないんだ、ごめんね。

<div class="" style="font-size: 5rem;">
    <i class="fab fa-google "style="background:gray"></i>
    <i class="fab fa-facebook "style="background:gray"></i>
    <i class="fab fa-apple "style="background:gray"></i>
    <i class="fab fa-amazon "style="background:gray"></i>
    <i class="fab fa-microsoft "style="background:gray"></i>
</div>

そろえたいときはclass属性に'fa-fw'を追加してみようね。

<div class="" style="font-size: 5rem;">
    <i class="fab fa-google fa-fw" style="background:gray"></i>
    <i class="fab fa-facebook fa-fw" style="background:gray"></i>
    <i class="fab fa-apple fa-fw" style="background:gray"></i>
    <i class="fab fa-amazon fa-fw" style="background:gray"></i>
    <i class="fab fa-microsoft fa-fw" style="background:gray"></i>
</div>

css適用

class属性にオリジナルを付与して、いろいろ変更することもできるよ。

<style>
    .my-gray {
        color: gray;
    }
</style>

<div class="" style="font-size: 5rem;">
    <i class="my-gray fab fa-google fa-fw"></i>
    <i class="my-gray fab fa-facebook fa-fw"></i>
    <i class="my-gray fab fa-apple fa-fw"></i>
    <i class="my-gray fab fa-amazon fa-fw"></i>
    <i class="my-gray fab fa-microsoft fa-fw"></i>
</div>

最後に

どうだった？
これは僕のほんの一部の機能にすぎないからね。

他にもたくさんあるんだから気になる人は公式fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-useを見てみてね。
また、この記事が良かったな～と思ってくれたら「いいね」とフォローもお願いね。

それじゃ～、ばいば～い。

Discussion