Written by Kasumi

おすすめ!多種多様なWebアイコンをCSSで表示!【CSS Icons】の使い方を紹介

Webアイコンの画像を作成するのが面倒。

画像ではなく、CSSでWebアイコンを表現したい。

多種多様なWebアイコンをCSSで作成。紹介してるサイトを知りたい。

【CSS Icons】というWebサービスを使えばこのような悩みを簡単に解決できます。

本記事では【CSS Icons】の使い方について解説します。

CSS Iconsにアクセス

https://css.gg/app

下記CSS Iconsにアクセスします。

https://css.gg/app

およそ700種類の多種多様なwebアイコンが用意されてます。

検索ボックスに任意のアイコン名を英語で入れて探してみましょう。

本記事では例で虫眼鏡アイコンを【search】と検索します。

アイコンをクリックしてCSSを取得

https://css.gg/search

欲しいアイコンが検索結果にあったらクリック。

上記画像のような画面に遷移します。

赤枠部分あたりにCSSとそれに伴うhtmlコードが表示されてます。

これをコピーしてWebアイコンを実装したいサイトのソースにペーストすればOKです。

以上の使い方で簡単にCSSでWebアイコンを実装できます。

まとめ

Webアイコンサービスで代表的なものに【Font Awesome】などがあります。

こちらはCSSでは表現できないですが7000種と非常にアイコン数が多いです。(一部有料)

こちらもCDNとhtmlクラスタグを入れるだけで実装できるのでおすすめです。

以上で解説を終わります。

目次

関連記事

Webツール

Webサイトがどこのサーバーで管理されてるか調査・確認する方法【Netcraftサービスが便利】

2022.05.19
889
Webツール

テスト用に任意の画像サイズURLを取得できるwebツール

更新日:2022.05.23
1396
Webツール プログラミング

chromeブラウザで更新したファイルのキャッシュ有効期間を調べる方法【htmlサイト】

2022.01.20
2328
Webツール

【無料】最大30ファイル一括でJPG・PNGを圧縮してくれるwebツール「あっしゅくま」を紹介

2022.01.14
290