<img>を使わずにアイコン画像を表示できる、Webアイコンフォントについて紹介します。
実際に使うときの注意点を、理解しておきましょう。
HTMLのソースコードをコピーまたはダウンロード
今回使用するHTMLファイルです。
下のソースコードをコピーして「3-1.html」で保存するか、ダウンロードして「chap06フォルダ」に保存しておいてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webフォントのアイコン画像</title>
</head>
<body>
<h1>Webフォントのアイコン画像</h1>
<p>インターネット上で提供されているフォントをCSSで読み込むことで、表示するブラウザやデバイスに関係なく、同じフォントやアイコンを表示できるサービス。</p>
<h2>Googleマテリアルアイコン</h2>
<p>Googleが提供するアイコン素材の無料サービス。<br>
ボタンなどのUIに使えるアイコン素材が多い。</p>
<h3>Googleマテリアルアイコンの表示</h3>
<p>好きなアイコンを表示してみよう！</p>
<p>（ここに表示する）</p>
<h2>Font Awesome</h2>
<p>Webアイコンフォントの中でも人気のサービス。<br>
ボタンなどのUIで使える素材以外にも、有名なサイトのロゴなど様々なアイコンが揃っている。<br>
有料と無料のプランがあるが、無料でも1600種類のアイコンが使える。</p>
<h3>Font Awesomeアイコンの表示</h3>
<p>好きなアイコンを表示してみよう！</p>
<p>（ここに表示する）</p>
</body>
</html>Googleマテリアルアイコン
Googleフォント
Googleが提供するWebフォントサービス。
様々な書体を、CSSで読み込んで表示することができるサービスです。
Webフォントは、デバイスのフォントに依存せず、同じフォントを使って表示ができるのが特徴です。
Googleフォントのページは、ユーザビリティを高めるために不定期でアップデートしているので、動画の説明と操作が変わることがあります。
うまく表示できない人は、このページでコードをコピーして作成してみましょう。
ここでは動画と同じ「Outlined」の「Home」アイコンを表示します。
使用するテーマのlinkタグをコピーして、titleタグの下に貼り付けてください。
HTMLファイルにlinkタグでCSSファイルを参照する
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />HTMLファイルにアイコンを表示する
bodyタグ内ならどこでもいいので、コピーして貼り付けてみましょう。
<p><span class="material-symbols-outlined">home</span></p>See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.
Font Awesome
Font Awesome
無料で簡単に使えるWebアイコンフォントで、多くのサイトで使われています。
Googleフォントと同様に、CSSで読み込んで表示することができるサービスです。
下のボタンを押して表示されたページから、最新バージョンのlinkタグをコピーしてください。
うまくできない場合は、以下のソースコードをコピーして使ってみてください。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />See the Pen 6-3-2 by Rayout-gw (@Rayout-gw) on CodePen.