こんにちは。
未来電子テクノロジー(https://www.miraidenshi-tech.jp/intern-content/program/)
でインターンをしているodattiです。
僕はいま、HTMLとCSSについて学習しています。
今回は、Webサイト上のボタンに使われるアイコン
↑こういうものです
を載せたいときに使うFont Awesomeについてご紹介します。
僕はプログラミング初心者ですので、間違っていることがあればどんどん指摘してください。すぐに訂正します。
Font Awesomeとは
Font Awesomeのページ(https://fontawesome.com/v4.7.0/)
をのぞいてみると、
Font Awesome gives you scalable vector icons that can instantly be customized
とあります。
アイコンを絵としてではなく、文字として利用することができるツールなんですね。
文字として利用できることの利点は、customized。
つまり、大きさや色などを自分で調節できちゃうということなんです。
ここからは、HTMLとCSSでFont Awesomeのアイコンを表示させる方法について説明します。
1. Font AwesomeのCSSファイルを読み込む
使いたいアイコンを見つけたら、CSSファイルを読み込みます。
そして、リンクをHTMLのファイルに貼ります。
2.spanタグにfaクラスとfa-(アイコン名)クラスを指定
どちらのクラスも別々に指定しましょう。
実は、たったこれだけのステップで、Webページにアイコンを表示させることができます。
アイコンの種類は600種類以上と豊富なので、Webページをよりおしゃれで個性的にできると思います。
おわりに
以上、Font Awesomeの概要と、使用方法について説明しました。
とても便利ですので、Webページにアイコンを載せたいときは、ぜひ使ってみてください！