おすすめ!多種多様な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クラスタグを入れるだけで実装できるのでおすすめです。

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

Ads

関連記事

Webツール

【簡単】googleドキュメント内の画像を保存する方法

2022.03.19
13
Webツール

Gmailにメール転送、【○○件名のメッセージにウィルスに感染または疑いのあるファイルがある】とエラー文が出てメッセージが開けない場合の対処方法

更新日:2022.05.23
54
Webツール

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

更新日:2022.05.23
129
Webツール

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

2022.05.19
46