History: Icons SVG or Fonts

• «
• »

            !!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:
{CODE()}
{glyph name="plus"} or {fa name="automobile"}
{CODE}

* 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?