HTMLでの情報アイコンの作成方法

フォントアイコンを使用する方法: フォントアイコンは、テキストとして表示されるアイコンです。有名なフォントアイコンライブラリであるFontAwesomeを使用する例を紹介します。

まず、FontAwesomeのCDNリンクをHTMLのセクションに追加します:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

次に、アイコンを表示したい場所で、適切なクラスを追加します。例えば、情報アイコンを表示するには、以下のようなコードを使用します:

<i class="fas fa-info-circle"></i>

この例では、fasはFontAwesome Solidスタイルを表し、fa-info-circleは情報アイコンを指定しています。

SVGアイコンを使用する方法: Scalable Vector Graphics (SVG) フォーマットのアイコンを使用することもできます。SVGアイコンは拡大縮小が容易で、高品質な表示が可能です。

まず、適切なサイズとスタイルのSVGアイコンを見つけます。無料のSVGアイコンライブラリであるFlaticonやIcons8などが利用できます。

SVGファイルをダウンロードし、HTMLに以下のようなコードを追加します:

<img src="path/to/info-icon.svg" alt="Information Icon">

src属性にはSVGファイルへのパスを指定し、alt属性には代替テキストを設定します。