2

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. enter image description here

Nick Germi
  • 403
  • 3
  • 6
  • 15

2 Answers2

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:

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" />
Nick Germi
  • 403
  • 3
  • 6
  • 15
-1

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.

Unknown User
  • 3,598
  • 9
  • 43
  • 81
  • Well above font I linked comes with SVG as well and the `color` property changes the icon colour but doesn't fill it if it's not already filled by design, however you gave me an idea to play with SVG and see if I can manipulate it to have it filled – Nick Germi Jan 11 '14 at 06:03
  • Try with `fill` property. This will surely fill entire `svg`. – Unknown User Jan 11 '14 at 06:09