Google Fontsのアイコンを使ってみよう！

以前Google Fontsの使い方についてご紹介しました。

Google Fontsを使ってみよう！

今回は、Google Fontsのアイコンを使ってみたいと思います！

Google Fontsにアクセス

https://　fonts.google.com/

▼iconをクリック

▼好きなスタイルを選ぶ

▼微妙に違う

▼真ん中のRoundedが丸みがあって、左のOutlinedは、SharpとRoundedの中間的な感じでしょうか。

▼今回はRounded、太さを700のアイコンたちを使用してみたいと思います。

アイコンをクリックすると右側にコードが出てきます。

▼今回は太さとか同じ設定のものを使うので、Static icon fontのlinkタグをコピーして、headタグ内にペーストします。

▼linkタグの下の、Inserting the iconのspanタグもコピーして、bodyタグ内にペーストします。

▼HomeアイコンとFavoriteアイコンも追加してコードは下記のようになりました。

▼ブラウザで確認。表示されました！

サンプル見本1️⃣

▼例えばこんな感じで使いたいとします

サンプルhtml1️⃣

そしたらhtmlは下記のようになります。

---

<nav class="first-nav">

   <ul>

    <li>

     <a href="fonts.google.com/"><span class="material-symbols-rounded"> search </span>Search</a>

    </li>

    <li>

     <a href="fonts.google.com/"><span class="material-symbols-rounded"> home </span>Home</a>

    </li>

    <li>

     <a href="fonts.google.com/"><span class="material-symbols-rounded"> favorite </span>Favorite</a>

    </li>

   </ul>

  </nav>

---

⭐️aタグのhrefにはクリックした先のURLを入れて下さい。

サンプルCSS1️⃣

---

<style>

   .first-nav ul {

    margin: 0;

    padding: 0;

    list-style-type: none;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

   }

   .first-nav li a {

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    background: linear-gradient(#a6e6f2, #4fcce6);

    color: #fff;

    padding: 0.5rem 0;

   }

   .first-nav li a:hover {

    opacity: 0.8;

   }

   .first-nav a span {

    padding-right: 0.2rem;

   }

  </style>

---

いかがでしたか？

よかったら色々試してみて下さい🎵