HTMLでアイコンフォントを使う方法やコードの入れ方を解説

HTMLでアイコンフォントを使う方法やコードの入れ方を解説

公開： 更新：
CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

目次
  1. アイコンフォントとは
  2. Font Awesomeでアイコンを表示する方法
  3. CDNでFont Awesomeを読み込む
  4. HTMLにアイコンのコードを記述する
  5. アイコンのサイズを変更する
  6. アイコンの色を変更する
  7. Material Iconsでアイコンを表示する方法
  8. CDNでMaterial Iconsを読み込む
  9. HTMLにアイコンのコードを記述する
  10. アイコンのスタイルを変更する
  11. アイコンのサイズや色を変更する
  12. HTMLのBootstrap Iconsでアイコンを表示する方法
  13. CDNでBootstrap Iconsを読み込む
  14. HTMLにアイコンフォントのコードを記述する
  15. SVGでアイコンを埋め込む
  16. アイコンのサイズや色を変更する
  17. HTMLでSNSアイコンを表示する方法
  18. Font AwesomeでSNSアイコンを表示する
  19. Material IconsでSNSアイコンを表示する

アイコンフォントとは

アイコンフォントとは、文字と同じようにWebページ上で表示できるアイコンのことです。画像ファイルと違い、拡大してもぼやけることがなく、CSSで簡単にサイズや色を変更できる点が特徴です。代表的なアイコンフォントには、Font Awesome、Material Icons、Bootstrap Iconsなどがあります。

アイコンフォントを使うメリットとして、以下の3つがあります。

  • ファイルサイズが小さくページの表示速度が速い
  • CSSでサイズや色を自由に変更できる
  • 拡大してもぼやけない高画質表示

これらの特徴により、アイコンフォントは現在のWeb制作において標準的な手法となっており、多くのWebサイトで採用されています。以下では、具体的なアイコンフォントの使い方について、詳しく解説していきます。

Font Awesomeでアイコンを表示する方法

Font Awesomeは世界中で最も利用されているアイコンフォントサービスで、無料プランでも約2,000種類のアイコンを使用できます。HTMLにコードを記述するだけで簡単にアイコンを表示でき、初心者でもすぐに使い始めることが可能です。

Font Awesomeでアイコンを表示する方法として、以下4つを覚えておきましょう。

  • CDNでFont Awesomeを読み込む
  • HTMLにアイコンのコードを記述する
  • アイコンのサイズを変更する
  • アイコンの色を変更する

それぞれの方法について、具体的なコード例とともに詳しく解説していきます。Font Awesomeを使えば、TwitterやFacebookなどのSNSアイコンも簡単に表示できるため、Webサイト制作の幅が広がるでしょう。

CDNでFont Awesomeを読み込む

Font Awesomeを使用するには、HTMLのhead要素内にCDNのlinkタグを記述して読み込む必要があります。CDNとは、世界中に配置されたサーバーからファイルを読み込む仕組みのことで、自分のサーバーにファイルをアップロードする手間が省けます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
  <!-- ここにアイコンのコードを記述 -->
</body>
</html>

上記のコードでは、head要素内にFont AwesomeのCDNを読み込むlinkタグを記述しています。このlinkタグを記述することによって、Font Awesomeの全てのアイコンが使用可能になります。

HTMLにアイコンのコードを記述する

Font Awesomeを読み込んだ後は、アイコンを表示したい位置にiタグを記述します。Font Awesomeの公式サイトでアイコンを選択し、表示されるコードをコピーしてHTML内に貼り付けるだけで、簡単にアイコンを表示できます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
  <i class="fas fa-heart"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-home"></i>
</body>
</html>

上記のコードでは、3つの異なるアイコン(ハート・星・家)を表示しています。iタグのclass属性に指定されているfas fa-heartのような値が、表示するアイコンの種類を決定します。

アイコンのサイズを変更する

Font Awesomeのアイコンは、class属性に特定の値を追加するだけで簡単にサイズを変更できます。fa-lgやfa-2x、fa-3xなどのクラスを追加することによって、アイコンを1.33倍、2倍、3倍と拡大できます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
  <i class="fas fa-heart"></i>
  <i class="fas fa-heart fa-lg"></i>
  <i class="fas fa-heart fa-2x"></i>
  <i class="fas fa-heart fa-3x"></i>
  <i class="fas fa-heart fa-5x"></i>
</body>
</html>

上記のコードでは、同じハートアイコンを5つ並べ、それぞれ異なるサイズで表示しています。一番左が標準サイズで、右に行くほど大きくなります。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

アイコンの色を変更する

Font Awesomeのアイコンは、文字と同じようにCSSで色を変更できます。iタグにclass属性を追加してCSSで色を指定するか、style属性で直接色を指定することによって、アイコンの色をカスタマイズできます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
  <style>
    .red-icon {
      color: #ff0000;
    }
    .blue-icon {
      color: #0000ff;
    }
  </style>
</head>
<body>
  <i class="fas fa-heart red-icon"></i>
  <i class="fas fa-star blue-icon"></i>
  <i class="fas fa-home" style="color: #00ff00;"></i>
</body>
</html>

上記のコードでは、3つの異なる方法でアイコンの色を変更しています。最初の2つはCSSクラスで色を定義し、3つ目はstyle属性で直接色を指定しています。

Material Iconsでアイコンを表示する方法

Material IconsはGoogleが提供するアイコンフォントで、マテリアルデザインに基づいたシンプルで美しいアイコンが特徴です。FillやWeight、Gradeなどの細かいスタイル調整が可能で、Webページの雰囲気に合わせてアイコンをカスタマイズできます。

Material Iconsでアイコンを表示する方法として、以下4つを覚えておきましょう。

  • CDNでMaterial Iconsを読み込む
  • HTMLにアイコンのコードを記述する
  • アイコンのスタイルを変更する
  • アイコンのサイズや色を変更する

Font Awesomeとは異なり、Material Iconsはspanタグの中にアイコン名を記述する形式を採用しており、直感的に使いやすい点が魅力です。以下では、Material Iconsの具体的な使い方について、詳しく解説していきます。

CDNでMaterial Iconsを読み込む

Material Iconsを使用するには、HTMLのhead要素内にGoogleのCDNからスタイルシートを読み込む必要があります。linkタグのhref属性にMaterial Iconsのフォントファミリーを指定することによって、全てのアイコンが使用可能になります。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <!-- ここにアイコンのコードを記述 -->
</body>
</html>

上記のコードでは、head要素内にMaterial IconsのCDNを読み込むlinkタグを記述しています。このlinkタグを記述することによって、Material Iconsの全てのアイコンがWebページで使用可能になります。

HTMLにアイコンのコードを記述する

Material Iconsを読み込んだ後は、アイコンを表示したい位置にspanタグを記述します。spanタグにclass属性でmaterial-iconsを指定し、タグの中にアイコン名を記述することによって、アイコンを表示できます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <span class="material-icons">home</span>
  <span class="material-icons">search</span>
  <span class="material-icons">favorite</span>
  <span class="material-icons">settings</span>
</body>
</html>

上記のコードでは、4つの異なるアイコン(家・検索・ハート・設定)を表示しています。spanタグの中に記述するhomeやsearchといった文字列が、表示するアイコンの種類を決定します。

アイコンのスタイルを変更する

Material IconsはFilled、Outlined、Rounded、Sharp、Two Toneの5つのスタイルから選択できます。スタイルを変更するには、CDNのURLとclass属性の値を変更する必要があり、それぞれのスタイルに応じて異なるフォントファミリーを読み込みます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
</head>
<body>
  <span class="material-icons">favorite</span>
  <span class="material-icons-outlined">favorite</span>
  <span class="material-icons-round">favorite</span>
</body>
</html>

上記のコードでは、同じハートアイコンを3つのスタイル(Filled・Outlined・Round)で表示しています。Filledは塗りつぶし、Outlinedは線のみ、Roundは角が丸いデザインになります。

アイコンのサイズや色を変更する

Material Iconsのアイコンは、CSSのfont-sizeプロパティでサイズを変更し、colorプロパティで色を変更できます。spanタグにclass属性を追加してCSSでスタイルを定義するか、style属性で直接指定することによって、アイコンの見た目をカスタマイズできます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    .small-icon {
      font-size: 18px;
    }
    .large-icon {
      font-size: 48px;
      color: #4285f4;
    }
  </style>
</head>
<body>
  <span class="material-icons small-icon">favorite</span>
  <span class="material-icons">favorite</span>
  <span class="material-icons large-icon">favorite</span>
  <span class="material-icons" style="font-size: 64px; color: #ea4335;">favorite</span>
</body>
</html>

上記のコードでは、4つのハートアイコンをそれぞれ異なるサイズと色で表示しています。font-sizeの値を変更することによって、アイコンのサイズを自由に調整できます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

HTMLのBootstrap Iconsでアイコンを表示する方法

Bootstrap IconsはBootstrapフレームワークの公式アイコンライブラリで、1,800種類以上のアイコンを無料で使用できます。SVGやアイコンフォントなど複数の表示方法に対応しており、プロジェクトの要件に応じて、最適な方法を選択できる柔軟性が特徴です。

Bootstrap Iconsでアイコンを表示する方法として、以下4つを覚えておきましょう。

  • CDNでBootstrap Iconsを読み込む
  • HTMLにアイコンフォントのコードを記述する
  • SVGでアイコンを埋め込む
  • アイコンのサイズや色を変更する

Bootstrap Iconsは、Bootstrapフレームワークとの相性が良いです。既にBootstrapを使用しているプロジェクトであれば、統一感のあるデザインを実現できるでしょう。以下では、Bootstrap Iconsの具体的な使い方について、詳しく解説していきます。

CDNでBootstrap Iconsを読み込む

Bootstrap Iconsをアイコンフォントとして使用する場合、HTMLのhead要素内にCDNからスタイルシートを読み込む必要があります。linkタグを記述することによって、全てのBootstrap Iconsがクラス名で簡単に呼び出せるようになります。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- ここにアイコンのコードを記述 -->
</body>
</html>

上記のコードでは、head要素内にBootstrap IconsのCDNを読み込むlinkタグを記述しています。このlinkタグを記述することによって、Bootstrap Iconsの全てのアイコンがアイコンフォントとして使用可能になります。

HTMLにアイコンフォントのコードを記述する

Bootstrap Iconsを読み込んだ後は、アイコンを表示したい位置にiタグを記述します。iタグにclass属性でbi bi-アイコン名という形式を指定することによって、アイコンを表示できます。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <i class="bi bi-house"></i>
  <i class="bi bi-search"></i>
  <i class="bi bi-heart"></i>
  <i class="bi bi-gear"></i>
</body>
</html>

上記のコードでは、4つの異なるアイコン(家・検索・ハート・歯車)を表示しています。class属性にbiという、プレフィックスとアイコン名を組み合わせた形式で記述します。

SVGでアイコンを埋め込む

Bootstrap Iconsはアイコンフォントだけでなく、SVGとして直接HTMLに埋め込むこともできます。SVGで埋め込む方法では、widthやheight、fillなどの属性を直接指定できるため、より細かいカスタマイズが可能です。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
  </svg>
</body>
</html>

上記のコードでは、ハートアイコンをSVGとして直接HTMLに埋め込んでいます。この方法を使うと、CDNを読み込まずにアイコンを表示でき、width、height、fillなどの属性を直接制御できます。

アイコンのサイズや色を変更する

Bootstrap Iconsのアイコンフォントは、CSSのfont-sizeプロパティでサイズを変更し、colorプロパティで色を変更できます。iタグにclass属性を追加してCSSでスタイルを定義するか、style属性で直接指定することによって、アイコンの見た目をカスタマイズできます。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    .small-icon {
      font-size: 16px;
    }
    .large-icon {
      font-size: 48px;
      color: #0d6efd;
    }
  </style>
</head>
<body>
  <i class="bi bi-heart small-icon"></i>
  <i class="bi bi-heart"></i>
  <i class="bi bi-heart large-icon"></i>
  <i class="bi bi-heart" style="font-size: 64px; color: #dc3545;"></i>
</body>
</html>

上記のコードでは、4つのハートアイコンをそれぞれ異なるサイズと色で表示しています。CSSクラスで定義する方法とstyle属性で直接指定する方法の両方を使用できます。

HTMLでSNSアイコンを表示する方法

WebサイトにTwitterやFacebook、InstagramなどのSNSアイコンを表示したい場合も、アイコンフォントを使えば簡単に実装できます。SNSアイコンは多くのアイコンフォントサービスで用意されており、企業ロゴをそのまま使用できるため、ブランドイメージを損なうことがありません。

HTMLでSNSアイコンを表示する方法として、以下の2つがあります。

  • Font AwesomeでSNSアイコンを表示する
  • Material IconsでSNSアイコンを表示する

SNSアイコンを適切に表示することによって、ユーザーがWebサイトから簡単にSNSアカウントにアクセスできるようになり、フォロワーの増加やエンゲージメントの向上につながります。以下では、各アイコンフォントを使ったSNSアイコンの表示方法について解説していきます。

Font AwesomeでSNSアイコンを表示する

Font AwesomeにはXやFacebook、Instagram、YouTubeなど、主要なSNSのアイコンが全て用意されています。HTMLにiタグを記述し、class属性にfab(Font Awesome Brandsの略)と各SNSのクラス名を指定することによって、SNSアイコンを表示できます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
  <style>
    .sns-icon {
      font-size: 32px;
      margin-right: 15px;
    }
    .twitter { color: #1DA1F2; }
    .facebook { color: #4267B2; }
    .instagram { color: #E1306C; }
    .youtube { color: #FF0000; }
  </style>
</head>
<body>
  <i class="fab fa-twitter sns-icon twitter"></i>
  <i class="fab fa-facebook sns-icon facebook"></i>
  <i class="fab fa-instagram sns-icon instagram"></i>
  <i class="fab fa-youtube sns-icon youtube"></i>
</body>
</html>

上記のコードでは、4つの主要なSNSアイコンを表示し、それぞれのブランドカラーを適用しています。fabというクラスはブランド系アイコン専用で、通常のアイコンで使うfasとは異なります。

Material IconsでSNSアイコンを表示する

Material IconsにもTwitterやFacebook、InstagramなどのSNSアイコンが用意されていますが、Font Awesomeと比較すると種類が少ない傾向があります。HTMLにspanタグを記述し、Material Iconsの公式サイトで表示されるアイコン名を記述することによって、SNSアイコンを表示できます。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    .material-icons {
      font-size: 32px;
      margin-right: 15px;
    }
    .twitter-color { color: #1DA1F2; }
    .facebook-color { color: #4267B2; }
  </style>
</head>
<body>
  <span class="material-icons twitter-color">twitter</span>
  <span class="material-icons facebook-color">facebook</span>
</body>
</html>

上記のコードでは、TwitterとFacebookのアイコンを表示し、それぞれのブランドカラーを適用しています。Material Iconsは、利用可能なSNSアイコンの種類がFont Awesomeより少ないため、多くのSNSアイコンを表示したい場合は、Font Awesomeの使用を検討するとよいでしょう。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプが提供する無料で学べるプログラミングスクール講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア 配属3ヶ月で30%の生産性向上を実現するいよぎんコンピュータサービスの新人研修に迫る - IT・プログラミングを知って学べるコネクトメディア 金融業界の業務効率化を加速するニッセイアセットマネジメントの生成AI×GAS活用研修事例 - IT・プログラミングを知って学べるコネクトメディア 【製造業のDX人材育成事例】デジタル人材の即戦力化を実現する、日本ガイシ株式会社の異動者向オンボーディング研修 - ITやプログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果｜サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修｜株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩｜株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

ALL
IT NEWS
ITコラム
IT用語集
2025年 11月 23日
MOEA、R&D100で7つの賞を受賞
2025年 11月 23日
Hon Hai Tech Day 2025が開幕、Foxconnの強力なパートナーシップと垂直統合の強みを披露
2025年 11月 23日
GAC、2025年広州モーター・ショー（2025 Guangzhou Auto Show）で「4つの成長エンジン」を発表、新たなGACを再構築
2025年 11月 23日
LEPAS L8 ― 優雅な走りと上質な空間で、家族のすべての旅を格上げ
2025年 11月 23日
GAC、欧州市場戦略を加速Magnaと提携し、現地協力を一層深化
2025年11月21日

カケコム・FRONTEO・リリーフサインが共催ウェビナー開催、情報持ち出し事件から学ぶリスク管理を解説
2025年11月21日

行政書士法人GOALとケーアールジーが共催セミナー開催、協会ビジネスモデルの構築法を解説
2025年11月21日

Authense法律事務所が無料ウェビナー開催、改正下請法（取適法）の実務ポイントを解説
2025年11月21日

株式会社H&KとGMOグローバルサインが共催ウェビナー開催、営業DXの落とし穴と認証技術を解説
2025年11月21日

株式会社アドバンスト・メディアとヤマハが体験セミナーを共催、AI議事録ツールの精度向上を解説

 IT NEWS
2025年11月20日

Geminiに関するセミナー・ウェビナー・説明会一覧

 ITマガジン
2025年11月18日

anacronとは？意味をわかりやすく簡単に解説
2025年11月18日

Anacondaとは？意味をわかりやすく簡単に解説
2025年11月18日

AMSBoundとは？意味をわかりやすく簡単に解説
2025年11月18日

AMOLED(Active Matrix Organic Light Emitting Diode)とは？意味をわかりやすく簡単に解説
2025年11月18日

AMP(Accelerated Mobile Pages)とは？意味をわかりやすく簡単に解説

 IT用語集

対象者別で探す

全ての研修を確認する
CodeCampKIDSフランチャイズ募集
全てのコースを確認する

子供（小学生・中学生・高校生）向け
プログラミング教室検索する

子供（小学生・中学生・高校生）がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供（小学生・中学生・高校生）
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する