Is it time to revisit font icons

Hung, Jonathan jhung at
Thu Apr 14 20:06:33 UTC 2016

I’m digging up this email thread now that I’ve spent some time using SVGs for the Quality Infrastructure demo.

Here are some personal remarks:

- being able to style an SVG using CSS is very desirable and convenient. I was able to easily add contrast styling for graphs, logos, and button icons with a few lines of CSS.

- if a SVG specifies a default width, height, and colour (which is typical of most SVGs created using Adobe Illustrator), you would not be able to override it with CSS as the default values have higher priority. I had to manually delete the values from the <SVG> element in order for custom CSS to work.

- positioning and styling SVGs is much more convenient and predictable than with icon fonts.

Bottom line: I really liked using SVGs inline with the HTML. It was easy to style and use.

Is it a viable strategy to track *.SVG files separately in git, and then copy and past the SVG element into HTML as needed?

- Jon.




T: 416 977 6000 x3951

F: 416 977 9844

E: jhung at<mailto:jhung at>


Inclusive Design Research Centre

205 Richmond Street W. 2nd Floor, Toronto, ON, M5V 1V3<><>

On February 23, 2016 at 1:08:39 PM, Joseph Scheuhammer (clown at<mailto:clown at>) wrote:

Hi Justin,

I'm not sure if I understand the issue completely, but it made me think
of the new aria graphics roles, specifically, the "graphic-symbol"
role. That is used where a small "icon" symbolizes something else; an
example would be the symbol for a lightbulb in a circuit diagram.
Here's the current proposed spec:

I don't think this is exactly the same idea as that for font icons, but
it's close. There are other roles in that document for other kinds of
graphics. And, for ARIA 2.0, there are even more, see:

Take all with a grain of salt in the sense that these are still in the
proposal stage and will take time for browser/AT uptake.


'Die Wahrheit ist Irgendwo da Draußen. Wieder.'
- C. Carter -

fluid-work mailing list - fluid-work at
To unsubscribe, change settings or access archives,
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list