icono
icono copied to clipboard
Browsers support
Hi, I ran a quick test in IE8 - IE10. I would like to share the result. Maybe after seeing the result, you can set minimum browsers support for this project and add it in the readme.
IE8
IE9
IE10
IE9 render all the icons great except for the logo and icon codepen.
Thank @ImBobby yes, becuse IE10+ does support skew.
Cross browser support seems to be a more widespread issue:
http://www.browserstack.com/screenshots/6a7d3d6c0d91bb26bfbc46b18c0eeed15b132381
Perhaps disclosing which browsers are supported and known issues might help avoid frustration.
There have been newer icons added since these screenshots. Of them almost all work in IE9. So for those that want to use icono but have to support IE9, here's the ones you gotta skip:
Ones that don't work in IE9:
- icono-frown - Mouth moved above eyes, now it's a derpy australian smiley. Fixed below.
- icono-caretUp - The lines for the carets don't meet at their ends, so they all look like weird x's
- icono-caretRight - I fixed this section see below, basically you can detect if you are in IE9 and
- icono-caretDown - target them like .ie9 .icono-caretUp and give them IE9 specific styles
- icono-caretLeft - See the link below
- icono-clock - Hour hand is a few pixels too high and looks like a squiggly line because of it. Fixed below
- icono-creditCard - The magnetic strip is missing in IE9
- icono-codepen - This one is just completely busted in IE9. Use SVG instead.
- icono-dribbble - the center line is missing in IE9 making the basketball look like a tennis ball. Why do we put a space between tennis and ball, but basketball can just be one word. I personally blame the presto rendering engine for that. Europeans.
- icono-caretUpCircle - Again, same as the other carets, these are all just weird x's
- icono-caretRightCircle - See link below for fix.
- icono-caretDownCircle
- icono-caretLeftCircle
- icono-caretUpSquare
- icono-caretRightSquare
- icono-caretDownSquare
- icono-caretLeftSquare
I went ahead and fixed the IE9 caret issues, frown face, and clock:
- https://gist.github.com/TheJaredWilcurt/d024664c457727c83bb6
Take that and use it however you want or implement it into the codebase for this repo.
Notes:
- icono-gear - The amount of teeth on the gear in IE9 is 12, in Chrome it's 16. Looks fine in both though, totally usable.
- icono-mouse - The center scroll ball lines look a little blurry in Chrome, but IE9 is crisp, sharp and pretty. This one actually looks better in IE9.
- icono-instagram - In IE9 the bottom corners have a thicker rounded corner on the inside. Still usable, and recognizable as instagram's logo, just with some hipster approved levels of irony due to the icon having a vignette.
- icono-icono - The Icono logo itself is completely busted as well in IE9, but who cares. The only use anyone other than this project would have with that is putting credits in their projects saying "Icons by Icono", and you could put their logo there, but you could just as easily hide that icon on IE9 and just show text instead, which you could to to begin with. Irrelephant.
Testing was done in Chrome 37 (even though we're up to like 42 or something now, I'll update when I'm good and ready! you're not my mom) and IE9 (32-Bit), both on Win Vista Ultimate 64-Bit.
@TheJaredWilcurt You're awesome and thanks for your great notes, i will do my best to fix this issues.
@saeedalipoor Thanks man. A request, can you make a Windows, Ubuntu/Linux, and OSX/Mac icons. That would be pretty useful for cross-platform stuff.
I'll try to make something :)