我不确定如何称呼来自 Astrit Malsija 的这些图标。标题是“500 多个 CSS 图标,可自定义,视网膜就绪和 API”,网址是“css.gg”,但它们实际上并没有任何名称。
无论如何,他们的卖点是
世界上第一个由代码设计的图标库。
其理念是它们不使用clip-path
,它们不是图标字体,甚至不是 SVG。它们基本上只是<i>
标签,根据需要使用CSS 的形状和伪元素来自我绘制。这是一种非常巧妙的方法。它们的渲染速度非常快,就像内联 SVG 一样,因为它们不需要任何其他资源。它们的可扩展性不是很好,因为所有内容都以px
为单位进行大小调整,但它们具有用于少数预定义大小的修饰符类。我可能不会在生产环境中使用这些(内联 SVG 是最佳选择),但无论如何,它都很巧妙。
我也不会称之为世界上第一个。Nicolas Gallagher 10 年前设计了类似这样的图标集(!)。
看起来它们只有一种尺寸,无法调整大小?
看起来有一个小尺寸设置。4 个固定尺寸。
要调整大小,只需直接向类或图标添加任何值,我正在为此使用自定义变量。
大小调整使用 transform 并且回退是 1 或实际大小。
似乎可以通过将它们容器的字体大小设置为 10px 来轻松处理缩放,然后可以使用 em 来处理它们的大小。只需使用您的样式表更改基本大小,您就可以搞定,不是吗?
我加入了那些说这可以用 em 单位完成的人的行列(默认值通常是 1rem = 16px,如果不同,您可能希望它在这种情况下随文本一起缩放)。
也就是说,我发现这些图标集合最有用的部分是使用的底层技术。您永远不知道您学到的东西何时会派上用场。