🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【HTML】アイコンの追加と表示｜FontAwesomeとMaterial Iconsの使用方法

HTMLでアイコンや特殊なキャラクターを表示する方法を、FontAwesomeとMaterial Iconsを使って解説します。

🔹 部分コード

<span class="fa fa-camera"></span> 写真を撮る

💻 完全動作コード（※このコピペのみでHTMLで動作するコード）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アイコン表示</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <span class="fa fa-camera"></span> 写真を撮る
</body>
</html>

📚 アイコンフォントの仕組みと実践的な使い方

HTMLで<span>要素を使ってアイコンを表示する方法は、現代のウェブ開発で広く採用されています。<span class="fa fa-camera"></span>のようなシンプルな記述で、豊富なアイコンを表示できるのが特徴です。

アイコンフォントの核心

FontAwesomeやMaterial Iconsは「アイコンフォント」という技術を使用しています。これは各アイコンをフォントの一文字として扱う仕組みで、font-familyプロパティで特殊なフォントを指定することで実現しています。CSSの::before疑似要素とcontentプロパティを組み合わせて表示されるケースもあります。

実際のプロジェクトでの活用法

ナビゲーションメニューでは<span class="fa fa-home"></span> ホームのように使えます。また、ボタンに<span class="material-icons">send</span>と追加すれば送信アイコンを簡単に埋め込めます。レスポンシブデザインでも、font-sizeを%やvw単位で指定すれば、画面サイズに合わせてきれいに拡縮します。

注意点として、<i>タグの代わりに<span>を使うのが現代的な作法です。また、CDNから読み込む場合はネットワーク接続が必要で、オフライン環境ではローカルにダウンロードしたファイルを使う必要があります。

プロジェクトで統一感のあるUIを実現するため、アイコンサイズはrem単位で指定し、色はCSS変数で管理するのがおすすめです。例えば.icon { font-size: 1.2rem; color: var(--primary-color); }のように定義すれば、一括でスタイルを変更できます。

コピーしました！