History: Icons SVG or Fonts
Preview of version: 22
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://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
- 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
I have mainly heard about possible issues in respect of browser compatibility towards SVG, but I did not find (with a very! limited time on research) any SVG icon sets for possible integration. So no icon set (and thus no check for licence yet at all).
Below I added the (mostly free and imho mostly LGPL compatible) licences for the icon FONTs mentioned above.
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 sorted in Tiki for FONT, whilst I heve read in the resources of this page, that PNG fallback for SVG seems to be not an easy task <- the last one I might have missunderstood and do further reading.
In my mind, if no serious arguments will be brought up, the actual path to FONT seems the best to do.
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?
- 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)
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
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.
History
Information | Version | |||||
---|---|---|---|---|---|---|
Mon 04 of Feb, 2019 21:28 UTC luciash d' being ?♂️ remove redundant maketoc when the page already has auto-toc | 38 | |||||
Mon 13 of Jun, 2016 04:46 UTC Gary Cunningham-Lee URL corrected to fix 404 error. | 37 | |||||
Sun 22 of Mar, 2015 19:30 UTC Marc Laporte | 36 | |||||
Wed 10 of Sep, 2014 18:28 UTC Torsten Fabricius added !!Related link to dev/Icons | 35 | |||||
Mon 01 of Sep, 2014 10:54 UTC luciash d' being ?♂️ | 34 | |||||
Sat 30 of Aug, 2014 18:27 UTC lindon | 33 | |||||
Fri 29 of Aug, 2014 03:18 UTC Gary Cunningham-Lee Replaced hardcoded color with a Bootstrap class. If class's color isn't good, let's change it in the theme option stylesheet. | 32 | |||||
Fri 29 of Aug, 2014 03:06 UTC Gary Cunningham-Lee Fixed typos. | 31 | |||||
Fri 29 of Aug, 2014 02:28 UTC Torsten Fabricius now 40% is enough | 30 | |||||
Fri 29 of Aug, 2014 02:27 UTC Torsten Fabricius Reviewed the headings | 29 | |||||
Fri 29 of Aug, 2014 02:21 UTC Torsten Fabricius added bg to div and moved levels param from wrong in div to right in maketoc | 28 | |||||
Fri 29 of Aug, 2014 02:19 UTC Torsten Fabricius typos mainly ;-) | 27 | |||||
Fri 29 of Aug, 2014 02:17 UTC Torsten Fabricius changed to 50% and limit to level 2 to gain space on the page (heading starts with !! anyway) | 26 | |||||
Fri 29 of Aug, 2014 02:16 UTC Torsten Fabricius lit width of maketoc div to 40% | 25 | |||||
Fri 29 of Aug, 2014 02:15 UTC Torsten Fabricius added brackets to links and added maketoc in a right floating div | 24 | |||||
Fri 29 of Aug, 2014 02:08 UTC Torsten Fabricius changed text SVG/FONT personal opinion in discussion to make it complying with the txt of the e-mail sent to the devlist a minute ago. | 23 | |||||
Fri 29 of Aug, 2014 01:51 UTC Torsten Fabricius after some review of resourced mentioned here, I added a few cents to the discussion (in a box) | 22 | |||||
Thu 28 of Aug, 2014 23:56 UTC Torsten Fabricius Added question to "icon sets" to "!!!! Make it possible for themes to override icons" | 21 | |||||
Fri 01 of Aug, 2014 01:04 UTC Marc Laporte Oups | 20 | |||||
Wed 30 of Jul, 2014 21:11 UTC Marc Laporte Old name | 19 | |||||
Wed 30 of Jul, 2014 15:09 UTC Marc Laporte Thank you Simon Guibord (labalab) for suggesting this one | 18 | |||||
Tue 08 of Jul, 2014 23:26 UTC gezza | 17 | |||||
Tue 08 of Jul, 2014 23:16 UTC gezza | 16 | |||||
Wed 02 of Jul, 2014 15:11 UTC gezza | 15 | |||||
Wed 02 of Jul, 2014 14:59 UTC gezza | 14 | |||||
Mon 30 of Jun, 2014 18:59 UTC gezza adding thoughts to the page | 13 | |||||
Sat 28 of Jun, 2014 09:14 UTC gezza some notes | 12 | |||||
Sat 24 of May, 2014 13:28 UTC Marc Laporte | 11 | |||||
Sat 24 of May, 2014 13:21 UTC Marc Laporte Source for SVG icons | 10 | |||||
Sat 24 of May, 2014 12:58 UTC Marc Laporte | 9 | |||||
Sat 24 of May, 2014 12:42 UTC Marc Laporte | 8 | |||||
Fri 09 of May, 2014 14:47 UTC luciash d' being ?♂️ | 7 | |||||
Thu 01 of May, 2014 03:13 UTC Marc Laporte | 6 | |||||
Thu 01 of May, 2014 01:04 UTC Marc Laporte Thanks Mike! | 5 | |||||
Fri 21 of Mar, 2014 03:41 UTC Marc Laporte | 4 | |||||
Thu 11 of Apr, 2013 01:43 UTC Marc Laporte | 3 | |||||
Sat 23 of Mar, 2013 14:10 UTC Marc Laporte | 2 | |||||
Tue 16 of Oct, 2012 22:28 UTC Marc Laporte | 1 |