css - 如何填充网络字体图标

Question

我在我的一个项目中使用https://github.com/AKIRA-MIYAKE/iOS7-icon-font，我想知道是否可以使用 CSS 为这些图标填充颜色

例如

Answer 1

事实证明，用 CSS 做我想做的事情是不可能的，但是为了实现这一点，我可以切换到 SVG 并根据自己的喜好对其进行操作（然后可能将其转换为 woff），我使用的工具是：

• 用于识别图标
• 操作 SVG 代码
• 用于将 SVG 字体转换为 WOFF 或其他格式

对于上面的示例图标，原始 SVG 代码：

<glyph glyph-name="uniF108" unicode="&#xf108;" 
d="M491 202q0 85 -69 144.5t-166 59.5t-166 -59.5t-69 -144.5q0 -49 24.5 -91t67.5 -71q-4 -34 -29 -68l-10 -15h18q60 0 106 47q29 -6 58 -6q97 0 166 59.5t69 144.5zM472 202q0 -76 -63 -130.5t-153 -54.5q-30 0 -59 7l-6 2l-4 -5l-10.5 -10.5t-27 -18t-39.5 -14.5
q22 39 22 67v5l-4 3q-41 26 -64.5 65t-23.5 84q0 76 63 130.5t153 54.5t153 -54.5t63 -130.5z" />

填充版：

    <glyph glyph-name="uniF204" unicode="&#xf204;" 
d="M491 202q0 85 -69 144.5t-166 59.5t-166 -59.5t-69 -144.5q0 -49 24.5 -91t67.5 -71q-4 -34 -29 -68l-10 -15h18q60 0 106 47q29 -6 58 -6q97 0 166 59.5t69 144.5z" />

Answer 2

svg您可以使用 css 属性直接为图标着色color。

color: #000;

这是另一个链接，您可以在其中获得一些免费svg图标。