So I'm sitting here at Rolled Alloys in my cube thinking - which can become cumbersome for the mind when you stare at walls all within reach - but regardless, I start to implement my search bar icon. I want it to look like...
As I start my coding process from where I left off, I realize I don't have a lot of work ahead of me. I really just need to implement the "Go" button because we are dropping the "All" feature now that we are using Google Custom Search Engine, which I have fallen in love with.
Back to my original purpose of posting this...
I was looking at possible ideas of implementing it - I know it is common practice to use <span> tags for my easily accomplished goal, BUT, and it's a big BUT, what about the possibility of using something else - STOP ANDY - don't innovate - it's not acceptable. So I look at what two of the most visited sites daily are using: Facebook and Twitter. They are full of icons and use .... <i> - an i tag? What? as in italics? To convey a different voice or an alternate way of saying something. This is odd. I mean sure, I get that HTML5 added features but did it add this? NOPE.
Facebook and Twitter save data for every time they use <i> rather than <span> - I can agree that <i> makes more sense semantically since <span> literally means anything and everything could be inside of this - there is no defining factor. So by them saving data every time, they in turn save loads of bandwidth - pretty cool. Okay so if the big dogs use it, maybe I should look at it. Hey, even bootstrap uses <i> over <span>. I love that framework.
Why not use <img /> ? We want to utilize background images as much as possible for performance enhancements.
I found an excellent article on Stack Overflow that reinforces my thinking. Major props for Holly on this.