How to fill web font icons

Question

I'm using https://github.com/AKIRA-MIYAKE/iOS7-icon-font in one of my projects and I was wondering if it's possible to fill these icons with colour using CSS

e.g.

Answer 1

Turns out it's not possible to do what I want with CSS, however to achieve that I can switch to SVG and manipulate it to my liking (and then perhaps convert it to woff), tools I've used are:

• For identifying icons
• To manipulate SVG codes
• For converting SVG font to WOFF or other formats

In case of example icon above, original SVG code:

<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" />

filled version:

    <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

You can directly color the svg icons using css property color.

color: #000;

Here's another link where you can get some free svg icons.