以前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>
いかがでしたか?
よかったら色々試してみて下さい🎵