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ツール

boxのメール通知をオフにする方法

2022.07.24
727
Webツール

ChromeでGoogleアナリティクスによるデータの収集を無効にする方法【PC版】

2022.05.14
158
Webツール

【無料】画像の圧縮を一括で行えるTinyPNGの使い方【mac、windows共通】

更新日:2022.05.23
262
Webツール

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

更新日:2022.05.23
841