Using Font Awesome Icons without <i> Tags
If you've not used glyph icon libraries like Font Awesome before, you're really missing out. They're incredibly useful, flexible, and are easy to implement via markup. The normal method for using font awesome is by using an <i> element with an icon-specific CSS class:
This works beautifully in most cases but what if you don't want to inject an <i> tag or simply can't? If you run into this case, you can still use Font Awesome glyphs! All you need to do is use the :before pseudo-element of the element you want to use and set its content and font-family:
/* more styling for the icon, including color, font-size, positioning, etc. */
This is essentially what Font Awesome does for <i> tags so it's only natural that we do so for our custom purpose. To find the content string for the icon you'd like, just open the font-awesome.css and look up the icon you'd like to use!
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...