History: Icons SVG or Fonts

Ressources

• 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://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

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

Futureproof - SVG or FONT

svg -> No Unnecessary HTTP Requests

Sematic Icon Names

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

Overwriting Icons

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?
• Would it be possible, if that made any sense, to use something like "icon sets" to replace icons for a Tiki site globally? How much effort that would be?
  Example: http://www.webhostinghub.com/glyphs/bootstrap/ same name - different glyphs (licence see below)

Source - Guideline - Licence

Pick some preferred icon source(s) so community has guidelines for consistency and make sure licensing is OK

Fallback

Have a Smarty function (or something) so vectorial is chosen if supported by the browser, and use p]ng 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

Licences

• Fontawesome http://fortawesome.github.io/Font-Awesome/
  Font: SIL OFL 1.1 http://scripts.sil.org/OFL
  Code (CSS/Less): MIT http://opensource.org/licenses/mit-license.html
  Documentation: CC-BY-3.0 http://creativecommons.org/licenses/by/3.0/

• Glyphicons-Halflings http://glyphicons.com/license/
  Same Licence as Bootstrap (so must be MIT in BS 3.1+)
  but attribution to glyphicons.com appreciated

• Glyphicons Free http://glyphicons.com/license/
  CC-BY-3.0 http://creativecommons.org/licenses/by/3.0/ attribution to glyphicons.com required
  Glyphicons All and Pro proprietary licence

• WebHostingHub Glyphs http://www.webhostinghub.com/glyphs/
  SIL Open Font License for download and using in personal and commercial projects.
  PNG icons are distributed under Creative Commons Attribution 3.0 License.
  Redistribution is not authorized. (just link to http://www.webhostinghub.com/glyphs/ to let people know where they can download those awesome glyphs!)

• Themify.me http://themify.me/themify-icons
  Mentioned on the website: 100% FREE! You may use or distribute it for any purpose, whether personal or commercial.
  no explicit licence mentioned!

• Monosocialiconsfont http://drinchev.github.io/monosocialiconsfont/
  Open Font License
  It's free for whatever use ( commercial or personal ) both for web or for printing purpose.

• Icomoon https://icomoon.io/#icons-icomoon
  Free (450+ icons) GPL / CC BY 3.0
  Essential (900) and Ultimate (1266) "developer friendly" proprietary licence

• Iconic https://useiconic.com/license/
  no redistribution even not in Open Source projects - only for free enduser usage.

• Icon fonts