History: Icons SVG or Fonts
Source of version: 39 (current)
Copy to clipboard
{syntax type="markdown" editor="wysiwyg"} ## Resources
- [http://thomaspark.me/2013/11/glyphsearch-improving-the-search-for-icon-fonts/]
- [http://fortawesome.github.com/Font-Awesome/]
- added to trunk r51759, r51760
- PRO: Does work perfectly even on older iPhones!
- [http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes]
- [http://www.webhostinghub.com/glyphs/]
- PRO: Contains a Tiki logo icon !
- Is this licensing good? [http://www.webhostinghub.com/glyphs/#howToUse]
- CON: Doesn't work on older iPhone (iOS 3.1.3)
- [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.com/thoughts/on/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
- http://pfefferle.github.io/openwebicons/examples/
### Some SVG libraries
- [http://www.flaticon.com/packs|Flaticon]
- License seems to be CC by 3.0, which is not addressed at https://tiki.org/License, but reads to be pretty open (hopefully others know for sure)
- [http://iconmonstr.com|Iconmonstr]
- License at http://iconmonstr.com/license/ seems open but I am easily lost regarding licenses
- [http://www.freepik.com/free-icons|Freepik]
- Looks like most just need to be attributed to Freepik
## 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
{BOX()}{sign user="Torsten" datetime="2014-08-29T01:51:19+00:00"}
I just started to look into the possibility to use .SVG instead of FONT and so far I did find a bunch of discussion WHY to use SVG or not to use SVG instead of FONT when it goes to vector-icons.
I have mainly heard about possible issues in respect of browser compatibility towards SVG, but I did NOT find ANY VG icon sets for possible integration (with a very limited! time on research).
At the bottom of the wiki page I added the licenses for the icon FONTs mentioned on the wiki page.
http://www.webhostinghub.com/glyphs shows an example how to possibly achieve switchable "icon-sets", as they use the Bootstrap Glyphicon-Halfling names for their icons.
Finally the PNG fallback seems to be already sorted in Tiki for FONT thanks to our Bootstrap activists.
For a convenient way of a PNG fallback for SVG I did not find further helpful information.
=> Conclusion=> In my mind, if no serious arguments will be brought up, the actual path to **FONT** seems the best to do.
In the end, when reviewing the licenses, I see only **Fontawesome** and **Glyphicon-Halflings** so far (both already implemented) and optionally **Monosocialiconsfont** as "add-on".
Maybe somebody digs out additional resources and projects?{BOX}
### Semantic 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 don't like what is shipped by Tiki? Can it be maintained simply by adding the image path to your preferred icon in the custom css file?
- {sign user="Torsten" datetime="2014-08-28T23:56:38+00:00"} 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 (license see below)
### Source - Guideline - License
**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 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, e.g.:
{CODE()}
{glyph name="plus"} or {fa name="automobile"}
{CODE}
- 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]
## Licenses
- **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** license
- **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 license 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** license
- **Iconic** [https://useiconic.com/license/]
**no redistribution** even not in Open Source projects - only for free enduser usage.
## Related
Also see [https://dev.tiki.org/Icons]
{DIV(class=titlebar)}alias{DIV}
- (alias(Icon fonts))