History: Icons SVG or Fonts

Readme

• 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://themify.me/themify-icons
• http://bootsnipp.com/buttons
• Social Icons - http://drinchev.github.io/monosocialiconsfont/
• http://css-tricks.com/icon-fonts-vs-svg/
• http://css-tricks.com/using-svg/
• http://css-tricks.com/svg-sprites-use-better-icon-fonts/
• 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
• http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694
• http://www.w3.org/TR/SVG/styling.html
• http://www.sitepoint.com/add-svg-to-web-page/

• http://www.webinsation.com/what-is-so-amazing-about-icon-fonts-and-svgs/
  • Read Rachel's comment

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

svg -> No Unnecessary HTTP Requests

http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/
http://thoughtfulweb.co.uk/thoughts/about/the-best-way-to-add-an-svg-image-to-your-website
http://stackoverflow.com/questions/3820406/best-way-to-place-svg-content-within-html
http://www.sitepoint.com/add-svg-to-web-page/
http://stackoverflow.com/questions/2011289/how-to-use-svg-files-in-a-webpage
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
http://code.tutsplus.com/articles/why-arent-you-using-svg--net-25414

Use semantic names for icon names

Maybe based on names from here (removing "fa-" from the beginning): http://fontawesome.io/cheatsheet

Make it possible for themes to override icons

Questions looking for an answer:

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

  
  

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"

Tiki related 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:

{glyph name="plus"} or {fa name="automobile"}

• maybe rework the icon smarty function (lib/smarty_tiki/function.icon.php) to manage icons in one place (update merge it with function.glyph.php and function.fa.php)

• http://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-font-awesome-icons
• http://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-icon-color
• http://fortawesome.github.io/Font-Awesome/examples/
• http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg
• http://stackoverflow.com/questions/18225954/use-fontawesome-icon-in-svg-without-external-files

• alias(Icon fonts