Font Awesomeを使ってみよう！
記事IT・テクノロジー
簡単にアイコンを表示できるFont Awesome。今回は使い方の手順をご紹介いたします。一緒にやっていきましょう😊
Font Awesomeのサイト
https:// fontawesome.com/
▼ヘッダーナビにある、Iconsをクリックするとさまざまなアイコンが出てきます。
まずはFont AwesomeのCDNを入手！
https:// cdnjs.com/libraries/font-awesome
▼</>のマークのところをクリックすると必要なコードがコピーできます
▼コピーしたコードは、htmlファイルのheadタグ内にペーストします
これでFont Awesomeを使う準備は整いました！
【方法1️⃣】iタグを使って表示する！
使いたいアイコンを上記のFont Awesomeのサイトから選びます。
https:// fontawesome.com/icons
▼今回は、こちらのWeatherから選んでみます
▼Freeアイコンをクリックすると、無料で使えるアイコンだけ表示されます。
左上のcloudを使ってみたいのでcloudをクリック。
▼iタグのところでクリックすると、コードがコピーされます。
<i class="fa-solid fa-cloud"></i>
をhtmlファイルのbodyタグ内にペーストするだけで、表示されます。
⭐️iタグはspanでもOK。<span class="fa-solid fa-cloud"></span>でも出ます。
【使用例】例えばこんなふうに使ってみる
👑完成見本
▼例えばこんなふうに、ヘッダーナビにアイコンをつけて表示してみたいと思います。一番右の薄い色はhoverエフェクト（マウスを置いたとき）です。
👑html1️⃣
▼bodyタグ内に下記を入れます
<header>
<nav>
<ul>
<li>
<a href="#"><i class="fa-solid fa-sun"></i>晴れ</a>
</li>
<li>
<a href="#"><i class="fa-solid fa-cloud"></i>曇り</a>
</li>
<li>
<a href="#"><i class="fa-solid fa-umbrella"></i>雨</a>
</li>
</ul>
</nav>
</header>
⭐️aタグのhref内にはクリックしたら飛びたいページのURLを入れます。（#と差し替える）
👑CSS1️⃣
▼CSSファイル内に記載する場合はstyleタグは取ってください😊
<style>
body {
margin: 0;
}
header {
background-color: darkblue;
box-shadow: 0 5px 20px rgba(150, 150, 150, 0.8);
}
header ul {
max-width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
header nav ul li {
color: #fff;
}
header nav ul li a {
text-decoration: none;
display: grid;
justify-content: flex-start;
align-items: center;
grid-template-columns: 2rem 1fr;
color: #fff;
padding: 1rem 2rem;
}
header nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.25);
opacity: 0.8;
}
header nav ul li:not(:last-child) {
border-right: solid 1px #fff;
}
</style>
【方法2️⃣】CSSでFont Awesomeを指定してみる！
iタグではなくて、CSS内にFont Awesomeの指定をすることも出来ます。
その場合は、Unicodeを使います。
▼右上にある、fから始まるコード
▼CSSで下記のように指定します。fの前にバックスラッシュを入れます。
font-family: 'FontAwesome', sans-serif;
content: '\f0c2';
こちらを使って、先ほどの完成見本のレイアウトを作ってみます。
👑html2️⃣
<header>
<nav>
<ul>
<li class="sun">
<a href="#">晴れ</a>
</li>
<li class="cloud">
<a href="#">曇り</a>
</li>
<li class="rain">
<a href="#">雨</a>
</li>
</ul>
</nav>
</header>
👑CSS2️⃣
<style>
body {
margin: 0;
}
header {
background-color: darkblue;
box-shadow: 0 5px 20px rgba(150, 150, 150, 0.8);
}
header ul {
max-width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
header nav ul li {
color: #fff;
}
header nav ul li a {
text-decoration: none;
display: grid;
justify-content: flex-start;
align-items: center;
grid-template-columns: 2rem 1fr;
color: #fff;
padding: 1rem 2rem;
}
header nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.25);
opacity: 0.8;
}
header nav ul li:not(:last-child) {
border-right: solid 1px #fff;
}
header nav ul li.sun a::before {
font-family: 'FontAwesome', sans-serif;
content: '\f185';
color: #fff;
padding-right: 0.5rem;
}
header nav ul li.cloud a::before {
font-family: 'FontAwesome', sans-serif;
content: '\f0c2';
color: #fff;
padding-right: 0.5rem;
}
header nav ul li.rain a::before {
font-family: 'FontAwesome', sans-serif;
content: '\f0e9';
color: #fff;
padding-right: 0.5rem;
}
</style>
いかがでしたか？
今回は以上になります。お疲れ様でした🌷
