纯css卡片前端_这个纯CSS图标库是所有前端开发人员想要的

Adobe设计师Wenting Zhang创建了一个有趣的Web应用程序，用于生成纯CSS图标 。 它简称为“ CSS图标” ，它可能是前端开发人员最酷的图标生成器之一。

该项目是完全免费的，并且在GitHub上开源，因此您可以自由下载并使用任何代码。

这些图标没有任何CSS依赖性，也不需要任何特殊的浏览器功能。 乍一看，这些图标似乎是基于SVG构建的，但实际上它们只是divs 。

通过CSS的魔力，您可以为常见的界面元素（例如汉堡菜单 ，三点图标或打印图标）构建自定义线图标 （还有许多其他图标）。

您可以在细线图标或深色图标之间进行选择。 它们都利用相似CSS属性 ，您甚至可以通过单击列表中的任何图标来查看它们的含义。 您会看到一个带有HTML和CSS代码的滑动侧栏以及放大的图标。

如果您朝着代码字段的右上角看，则会看到一个小复制图标 。 单击该按钮可自动将代码复制到剪贴板。 哦，那个复制图标？ 还使用Wenting的纯CSS代码构建。

要更改任何图标的颜色 ，只需在主图标类中找到color属性 。 更新一种color属性也会更改其他所有内容。

由于这些图标非常简单 ，因此可能不适用于每个网站。 但这是图像或图标字体的不错替代品，并且完全免费 。

请查看CSS Icon主页，以查看更多示例并复制/编辑源代码 。 如果您想在浏览器中使用源代码 ，还可以在CodePen中 分别测试每个图标 。

翻译自: https://www.hongkiat.com/blog/pure-css-icons-gallery/