FontAwesome

6808 ワード
FontAwesome FontAwesome テキストリンク

ドットインストールの学習メモです

FontAwesomeのサイトへ行ってkitのscriptタグをコピペしてくる。

headに埋め込み

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UST-8">
    <title>MyFontAwesome</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://kit.fontawesome.com/496f164843.js" crossorigin="anonymous"></script>
</head>

bodyに埋め込み

iタグ、クラスはfas fa-ad my-icon
内容はアイコンのページに書いてある↓
タグをクリックすればそのままコピーできる

<body>
    <i class="fas fa-ad my-icon"></i>
</body>

- fas 塗り潰し solid
- far 白抜き regular
- fal 細い線 light
- fab ツイッターなど　brand

- fa-ad
- fa-flag
など

my-iconクラスは足しておく

スタイルシート

.my-icon {
    font-size: 32px;
    color: orange;
}

結果こうなる

アイコンのサイズ変更

  • fa-xs
  • fs-sm
  • fa-lg
  • fa-2x...10x
<body>
    <i class="far fa-flag my-icon fa-xs"></i>
    <i class="far fa-flag my-icon fa-sm"></i>
    <i class="far fa-flag my-icon fa-lg"></i>
    <i class="far fa-flag my-icon fa-5x"></i>
</body>

リストにアイコンを使う

  • fa-fw　幅をそろえる。
<body>
    <div><i class="fas fa-home fa-fw"></i>Home</div>
    <div><i class="fas fa-info fa-fw" ></i>about</div>
    <div><i class="fas  fa-question fa-fw"></i>help</div>

    <ul class="fa-ul">
        <li><span class="fa-li"></span><i class="fas fa-home fa-fw"></i></span>Home</li>
        <li><span class="fa-li"></span><i class="fas fa-info fa-fw" ></i></span>about</li>
        <li><span class="fa-li"></span><i class="fas fa-question fa-fw"></i></span>help</li>
    </ul>

</body>

回転ローディングアイコン　ほぼコピペでおk

<body>
    <i class="fas fa-spinner fa-spin fa-3x"></i>
    <i class="fas fa-spinner fa-pulse fa-3x"></i>
</body>

以下FontAwesome5と６で仕様が違うみたいなので割愛。