CSSでアイコンを作成するには？おすすめのアイコンフォントサービスも紹介

2024.01.03

Webページの目次や見出しなどに、アイコンが使われているのを見たことがあるかと思います。

CSSで簡単にアイコンが作れれば、多くの場所で使えて便利になりますよね。

アイコンは記号としての役割だけでなく、重要な箇所に目を向けさせる機能もあります。

今回は、CSSを使ってアイコンを作成したい、という方のために

CSSでアイコンを作るには
おすすめのアイコンフォントサービス

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSで作ったアイコンを自分のWebページに載せる方法が分かるようになりますよ。

アイコンフォントを気軽に使えるWebサービスも合わせて紹介します。

ぜひ最後まで読んでくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

CSSでアイコンを作る方法

では、CSSを使ってアイコンを作成するには、どのような方法があるのでしょうか？

大きく分けて2つの方法があります。

自作したものをCSSに記述
アイコンフォントのサービスを利用

1つ目の方法は、アイコンの形を作るために、自身でCSSファイルに記述していくやり方です。

2つ目の方法でもCSSを利用しますが、アイコンフォントのサービスを利用するため、より複雑なアイコンを簡単に作成することができます。

それぞれの方法を紹介していきましょう。

自作したものをCSSに記述

表示させたいアイコンを作成し、CSSファイルに記述します。

例えば、矢印のアイコンを表示したい場合、HTMLに

<a href="#" class="arrow">アイコンの作成</a>

と記述し、CSSで下記のようにスタイルを付けます。

.arrow{
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #333;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}
.arrow::before{
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 4px;
  width: 4px;
  height: 4px;
  content: "";
  border: 4px solid transparent;
  border-left: 4px solid #ff8989;
  transform:translateY(-50%); 
}
.arrow::after{
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 4px;
  margin: auto;
  content: "";
  vertical-align: middle;
  border-left: 4px solid #ff8989;
  transform:translateY(-50%);
}

これで、文字の横に矢印アイコンを表示させることができました。

検索して探してみると、コピペで作成できるアイコンを公開している記事も多々あります。

簡単なアイコンでしたら、誰かが作成しているかもしれませんね。探してみるのも良いでしょう。

アイコンフォントのサービスを利用

アイコンフォントを提供しているWebサービスを利用する方法もおすすめです。

CSSコードを取得するだけでなく、アイコン画像をダウンロードしたり、<head>内でCDNを読み込んだりすることでアイコンが使用できます。

アイコンフォントのサービスの中でも、以下の2つは多くのWebサイトで利用されています。

CSS ICON
Font Awesome

それぞれの特徴と使い方を紹介しましょう。

CSS ICONについて

CSS ICONは、CSSのみで作成されたアイコンを公開しています。

CSSのコードをコピペして利用します。500以上のアイコンが提供されているので、欲しいアイコンもきっと見つかるはずです。

CSS ICONの使い方

まずは、使いたいアイコンを探して、クリックしてみてください。

すると、右側にタブが現れて、そこでHTMLとCSSのコードを取得できます。

CSSだけでなく、JavaScriptを使ったアニメーションのアイコンも取得できます。

画面左上のCSS ICONの横にあるanimateをクリックすると、アニメーションアイコンを選択できるようになります。

2つのアイコンをクリックして、それぞれA、Bとし、AからBへのアイコンに変わるアニメーションを作成できます。

よくあるハンバーガーメニューのアイコンがバツ印に切り替わるアニメーションも作成できますよ。

Font Awesomeについて

Font Awesomeは、Web上のアイコンを自由に使用できるサービスです。

多くのアイコンが揃っており、サイズや色、動きなどのカスタマイズも簡単に実装できます。

Font Awesomeの導入方法は以下の2つです。

Font Awesomeライブラリをダウンロードする
CDNを使って読み込む

1つ目の方法は公式サイトからダウンロードして、サーバーにアップロードする方法です。

サーバーのCSSディレクトリなどに配置して、他のCSSと同様に<head>内で読み込みます。

すべてのアイコンが含まれている「all.css」を使う場合、以下のような記述になります。

<link rel="stylesheet" href="./css/all.min.css">

また、CDNを使ってHTMLに読み込む方法があり、こちらの方が簡単です。

下記のコードを記述して使います。

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

「v5.15.4」の部分は、バージョン情報になります。新しいバージョンのアイコンを使うには、それに応じたバージョンを書く必要があります。

以前はなかったのですが、現在はFont Awesomeに登録して、自分のIDを取得することができます。

登録後、ログインして得られる以下のようなコードを記述することでも、アイコンを使えるようになります。

<script src="https://kit.fontawesome.com/[登録者のID].js" crossorigin="anonymous"></script>

少し面倒ですが、1度登録してしまえば、新しいバージョンに書き換える、という作業をせずに最新の機能を使えるメリットがあります。

Font Awesomeの使い方

Font Awesomeを使ってアイコンを表示させる方法は、2つあります。

HTMLに記述する
CSSに記述する

HTMLで表示させるには、Font Awesomeの公式サイトで使いたいアイコンのページに飛んで、コードをコピーします。

以下のようなHTMLコードです。Twitterの鳥の形をしたアイコンを表示します。

<i class="fab fa-twitter"></i>

また、CSSで表示させるには、疑似要素で使いたいアイコンを指定します。

まずはHTMLでアイコンを配置する場所を作成します。

<a class="icon">CSSでアイコン表示させるには？</a>

CSSでは、疑似要素のbeforeを使用します。

.icon::before {
  font-family: "Font Awesome 5 Brands";
  content: '\f099';
  font-weight: 900;
}

これで、文章の前にアイコンを表示させることができました。

「content: ‘\f099’」はアイコンの種類の指定です。こちらもアイコンのページでコードを取得できます。

CSSに記述する場合、font-familyの指定は必須です。

今回、「font-family: “Font Awesome 5 Brands”」と記述していますが、これはTwitterやFacebookなど、ブランド系のアイコンを表示させるときに使うものです。

ブランド系ではないものには、「Font Awesome 5 Free」を指定します。

font-weightも必須となります。こちらもアイコンのタイプによって異なるので注意しましょう。

その他のアイコンフォントサービス

「CSS ICON」と「Font Awesome」以外にも、アイコンフォントを提供しているサービスは数多くあります。

ここでは、「Font Awesome」のようにCDNに対応しているものを中心に紹介します。

CDNは、データをダウンロードせずに、Web上のライブラリを読み込んで使用できる機能です。

<head>内にコードを書いて読み込むことでアイコンフォントが使えるようになりますよ。

Line Awesome

Line Awesomeは、線が細いアイコンを使いたいときに便利なサービスです。

前述したFont Awesomeには、多くのアイコンがありますが、線が太くて、シュッとしたサイトデザインには合わない場合があります。

この悩みを解決するために作られたものが、Line Awesomeです。

Font Awesomeのアイコンフォントをカバーしており、ほぼ同じ方法で使用できるので、Font Awesomeに慣れている方はすぐに対応できますね。

アイコンの指定のみではなく、大きさやアイコンの向きの変更、アニメーションの方法なども同じ要領で可能です。

ぜひ利用してみてください。

Google Material Icons

Google Material Iconsは、Googleが提供するアイコンフォントサービスです。

こちらもCDNを読み込むことで使用できます。

マテリアルデザインのUIに特化したアイコンが多く、ボタンなど使用場面がイメージしやすいものが豊富に揃っています。

IcoMoon

IcoMoonは、アイコンフォントをダウンロードして使用することができるサービスです。

SVGやPNGなどの形式で書き出すほかに、CSSなどのファイルを取得することもできます。

IcoMoonの最大の特徴は、オリジナルのアイコンを作成できるという点です。

他のサービスでは、決まったアイコンフォントの中から選ぶというのが普通ですが、IcoMoonでは、自分で作成したSVGを読み込ませることで、アイコンフォントを作成することができます。

完全にオリジナルでなくとも、すでにあるアイコンをカスタマイズして、新しいアイコンを作ることもできます。

新しいアイコンを作成してみたい方は、ぜひ試してみてください。

CSS Icons

CSS Iconsは、CSSのみで作成されたアイコンを取得することができます。

使いたいアイコンをクリックすることで、HTMLとCSSのコードが得られますが、サイズや色などを選択して、カスタマイズ済みのアイコンのCSSを得ることも可能です。

コピペで簡単に使えるアイコンが多数揃っているので、こちらも活用してみてください。

まとめ：CSSのアイコン作成にはアイコンフォントサービスを活用

今回は、CSSでアイコンを表示させる方法について解説してきました。

すぐに使えるアイコンフォントサービスもいくつか紹介しましたね。

アイコンは自作もできますが、すべてのアイコンを作成するのは中々難しいものです。便利なものはどんどん活用していきましょう。

Webサイトにアイコンを配置する際に、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

【無料で使える】おすすめのCSSデザインテンプレートまとめ！

2024.01.03

CSSのbox-shadowで影を追加する方法とおすすめジェネレーターを紹介

2024.01.03

Pythonとは？注目のプログラミング言語の学習方法やできることを徹底解説。

2024.01.31

プログラミングが苦手・嫌いだと感じる理由とは！克服する5つの方法を紹介

2024.01.11

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする