We are using icon-fonts in some of the new web-component based building-blocks
examples. I have created a gaia-icons repo so that our components can
explicitly depend on these icons. Inside this repo we have all the source SVGs
inside `images/`. A grunt task called grunt-webfont converts all these SVGs
into a single icon-font. To add new icons, you simple have to drop new SVGs
into the `images/` directory.
Icon fonts are perfect for our themeability requirements as they can easily by
styled with CSS. AFAIK SVGs cannot be colored/styled with CSS alone (but I
don't know that much about SVG).
We've been using icon-fonts in Camera for a while now and so far it's been
great. I plan to move Camera to pull its icon-font from gaia-icons so that we
can begin to move to toward a central icons store.
IMO SVG and icon-fonts will always serve slightly difference use cases. But for
simple icons, icon-fonts have always got the job done; allowing me to focus on
the more important stuff :p
W.
----- Original Message -----
From: "Patryk Adamczyk" <padamc...@mozilla.com>
To: "Jet Villegas" <j...@mozilla.com>
Cc: "John Daggett" <jdagg...@mozilla.com>, "b2g-internal"
<b2g-inter...@mozilla.org>, "Cameron McCormack" <hey...@gmail.com>, "Jonathan
Watt" <jw...@mozilla.com>, "L. David Baron" <dba...@mozilla.com>, "Jaime Chen"
<jac...@mozilla.com>, "Vivien" <vnico...@mozilla.com>, "sicking"
<sick...@mozilla.com>, "Robert O'Callahan" <rocalla...@mozilla.com>, "Jonathan
Kew" <j...@mozilla.com>, "mozilla.dev.platform group"
<dev-platform@lists.mozilla.org>
Sent: Monday, June 16, 2014 10:14:19 PM
Subject: Re: Icon fonts in FxOS
Comments inline.
1. Let people use the icon fonts anywhere. (ie. like "MS WingDings" can be used
for this purpose)
We can always host the icon fonts on github to download. Could web developers
package the icon fonts in the apps itself? That way they can use the font
outside of Gaia if they want, and when perhaps we can write some script that
would use the system icon fonts if they are present, otherwise it would fall
back to the ones packaged in the app. That way we can get the performance gain.
It would be good if we can even go with 1 app to type this out for the next
release, our initial plan was Settings.
<blockquote>
2. The patch in bug 1008458 introduces "private" fonts that use the Unicode
Private Use Area (PUA) for icon glyphs.
3. Use PUA characters as per bug 1008458 but disable use of PUA characters in
local fonts on all platforms except for FirefoxOS certified apps.
4. Use the OpenType discretionary ligatures ("dlig") feature to hide the glyphs
( see https://bugzilla.mozilla.org/show_bug.cgi?id=1008458#c22 )
</blockquote>
To me feels like #2 and #4 are the cleanest, #4 being the least code intensive,
especially if we’d ideally want to go pure SVG.
<blockquote>
I'd like some feedback here, first on my proposal that we go with Option 1 for
1.4. Second, I'd like us to solve the font leakage problem for 2.0 with one of
the 3 other proposals, if still needed--I'd like to see how far we get to
improve SVG performance (bug 999931) to make all this a moot point. I really am
not a fan of icon fonts (see
https://twitter.com/73inches/status/468368206282113024/photo/1 )
</blockquote>
We on the visual design team would prefer SVG over Icon Font as well, clearly
there are some performance limitations as you cited, so we opted for icon fonts
for the system icons since they are single colour. Each release we spend weeks
trying to update graphics, so the sooner we can get something in place the
better.
---
Patryk Adamczyk, R.G.D.
Design Manager - Visual Design, Firefox OS
Mozilla Corporation
_______________________________________________
b2g-internal mailing list
b2g-inter...@mozilla.org
https://mail.mozilla.org/listinfo/b2g-internal
_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform
