History: Icons SVG or Fonts
Preview of version: 13
Discussion
There are hundreds of icons in Tiki. Right now, jpeg/png/gif. The opportunity is to move them progressively to a vector format. This permits scaling, styling, saving bandwidth, etc.
There are 2 options: SVG vs fonts
It would be a shame to maintain both if there is one that could address the needs. It would be a shame to invest migration time in one of the solutions only to do the work in double later if a change is decided.
Feeling is that Tiki should:
Pick the best future-thinking solution between SVG & fonts
Use semantic names for icon names
Make it possible for themes to override icons
Pick some preferred icon source(s) so community has guidelines for consistency and make sure licensing is OK
Have a Smarty function (or something) so vectorial is chosen if supported by the browser, and use png as a fallback
- The icon sources will surely have a png fallback available
- If no fallback is available give an error message "Please use a modern browser"
Candidates
- http://thomaspark.me/2013/11/glyphsearch-improving-the-search-for-icon-fonts/
- http://fortawesome.github.com/Font-Awesome/
- added to trunk r51759, r51760
- http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes
- http://www.webhostinghub.com/glyphs/
- Contains a Tiki logo !
- Is this licensing good? http://www.webhostinghub.com/glyphs/#howToUse
- http://fontello.com/
- http://bootsnipp.com/buttons
- Social Icons - http://drinchev.github.io/monosocialiconsfont/
- http://css-tricks.com/icon-fonts-vs-svg/
- http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg
- http://www.flaticon.com/packs
- http://commons.m.wikimedia.org/wiki/Comparison_of_icon_sets
Notes
- some glyphicons come with bootstrap (http://getbootstrap.com/components/), but the variety is not enough, we need more icons
- font-awesome seems to be a good addition both from variety and licensing point
- both glyphicons and font-awesome icons are managed now with smarty functions (lib/smarty_tiki/), so in the tpl files you only need to add the name of the icon, eg:
Copy to clipboard
{glyph name="plus"} or {fa name="automobile"}
- how can you easily change icon if you dont like what is shipped by Tiki? Can it be mananed simply by adding the image path to your preferred icon in the custom css file?