純粋なCSSアイコンのこのギャラリーは、すべてのフロントエンド開発者が望むものです。

アドビデザイナーのWenting Zhangは、 おもしろいウェブアプリ にとって 純粋なCSSアイコンを生成する. それは単に名前が付けられている “CSSアイコン” そしてそれは最もクールなものの1つかもしれません アイコンジェネレータ フロントエンド開発者向け.

このプロジェクトは 完全に無料 そして GitHubでオープンソース化 だからあなたはダウンロードして、コードのどれでも台無しにするのは自由です.

これらのアイコン CSSに依存しない または特別なブラウザ機能が必要です。一見したところ、アイコンはSVG上に構築されているように見えますが、 彼らは実際には単なるdivです.

CSSの魔法を通して、あなたは作ることができます カスタムラインアイコン にとって 共通インターフェース要素 ハンバーガーメニュー、3ドットアイコン、印刷アイコンなど.

あなたが選ぶことができます 細い線のアイコン または 濃い色のアイコン. 両方とも利用する 同様のCSSプロパティ リスト内のアイコンをクリックして、それらが何であるかを見ることもできます。あなたが表示されます スライドサイドバー HTMLおよびCSSコードとアイコンの拡大表示.

コードフィールドの右上隅を見ると、 小さなコピーアイコン. それをクリックして 自動的にコードをコピーする あなたのクリップボードに。ああ、そしてそのコピーアイコン？ Wentingの純粋なCSSコードでも構築されています.

に 色を変える どんなアイコンでも、 を見つける 色 財産 メインアイコンクラス内. そのアップデート 色 財産 他のすべても変えるでしょう.

これらのアイコンは ものすごく単純, おそらくすべてのWebサイトでうまくいくとは限らない。しかしこれは 画像やアイコンフォントのかっこいい代替品 そしてそれは 完全に無料.

をチェック CSSアイコンのホームページ に もっと例を見る と ソースをコピー/編集する. あなたもすることができます 各アイコンを別々にテストする CodePenの場合は、 ソース付きのおもちゃ あなたのブラウザで.