【HTML,CSSの基礎】⑩アイコンを表示する「Font-Awesome 」

こんにちは、Mac大好きです！Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。


プログラミングで挫折しないためには楽しんでやることです！

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

アイコンを表示するFont-Awesome

Webサイトにアイコンを表示させるには「Font-Awesome」フォントオーサムを使うと簡単です。

フォントオーサムとは、アイコンを表示させるためのサービスです。詳しい使い方はのちほど解説します。

まずはサンプルのコードを見て下さい。

おなじみのTwitterやインスタグラム、AppleやGoogleのロゴマークを表示することができました。

それではフォントオーサムの使い方をご紹介します。

フォントオーサムの使い方

フォントオーサムの使い方を説明します。

①まず、どのようなアイコンがあるか下記のサイトで見てみましょう。

Font Awesome

②使いたいアイコンを決めたら、そのアイコン固有のHTMLタグ(iタグ)をコピーして、HTMLファイルに貼り付けます。

<i class="fab fa-accessible-icon"></i>　のように「i class」ではじまるiタグのことです。

③最後に、フォントオーサムを使うための設定をします。

HTMLファイルのhead部分にフォントオーサムへのリンクを貼ります。下記のコードをコピーして、headタグのtitleの下あたりに貼ればアイコンが表示できます。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

※バージョンは変更もできます。上記の「v5.6.1」の部分がバージョンなので、もしフォントオーサムのサイトでバージョンが更新されていたら、新しいバージョンに変えてみましょう！

これでWebサイトに好きなアイコンを表示できます。いろいろなアイコンを表示して遊んでみましょうー！

今日はここまでです。

これからも「プログラミング初心者向け」に簡単なコードをご紹介していきます。「Progateの復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう！よろしくお願いします。