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:
<i class="icon-github"></i>
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:
div.github:before {
content: "\f09b";
font-family: FontAwesome;
/* 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!
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Convert XML to JSON with JavaScript]()
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
![jQuery topLink Plugin]()
Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery.
The XHTML
A simple link.
The CSS
A little CSS for position and style.
The jQuery...
![Making the Firefox Logo from HTML]()
When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt.
That had to change.
The basic...
Awesome tip !
Thank you !
In my experience with Font Awesome, you don’t have to use .
You can add the icon class to a and it works just the same.
You can also still put contents within the div like so:
Fork me
This will display the icon with the text inline to the right.
Note: I haven’t really checked to see how IE7 handles this, but my guess is that the contents gets replaced by the icon.
Sorry…HTML was still stripped…Lets try that again…
In my experience with Font Awesome, you don’t have to use
/**/.You can add the icon class to a
/**/and it works just the same./**/
You can also still put contents within the div like so:
/*Fork me*/
This will display the icon with the text inline to the right.
Note: I haven’t really checked to see how IE7 handles this, but my guess is that the contents gets replaced by the icon.
Well thats just kinda embarrassing :)
Here is a gist to go with it … https://gist.github.com/ammmze/6380290
i was looking on this idea, thank you :)
And when they change the char codes, in… say… version 4?
If they ever change the char codes then you should not use them at all
You don’t need to use an tag. I’ve been doing for a very long time, even with the latest 3.2.1 code. Even look at the source, there is no specificity.
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css
Well it removed my markup. But you can simply use (span tag) or any other element.
input:before doesnt work.
Never mind – “:before and :after render inside a container” so form elements are not possible :/
By using an i tag though, you can at least assign an “aria-hidden” attribute to what’s really just a decorative element. Applying the icon to an element with real content will cause screen-readers to pronounce the pseudo-element’s content which you likely want to avoid. See related – https://github.com/FortAwesome/Font-Awesome/issues/389
http://fontawesome.io/whats-new/ — a major new version of FontAwesome was just released yesterday. Still awesome, but the classes have all changed. Correct syntax is now:
<i class=”fa fa-github”><i>
Like Mickey said, this is not a good practice. The chars order could change in future versions and all breaks down to refactor. I’m trying to find a solution for this but still nothing…
Found a good solution using a mixin with sass
@mixin icon-pseudo($name) {
font-family: “your-font-name”;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
@extend .#{$name}:before;
}
Or simply @extend .#{$name}:before;
where this number come from “\f09b” ? How to know it?
You can get it by looking in the font-awesome.css file and seeing how each icon is set (via the `content` property).
you can actually get it now directly on the icon page!!
e.g.
http://fortawesome.github.io/Font-Awesome/icon/arrow-circle-right/
notice the unicode field at the top!
Yet again you come to the rescue.
I was forgetting to specify the font-family.
I used a little snippet I found at http://www.weloveiconfonts.com
[class*="entypo-"]:before { font-family: 'entypo', sans-serif; }Works for me…
how can you specify the size of the awesome font in the
:beforeor:afterJust specify the font size like this
font-size:30px;https://github.com/petermelias/font-awesome-sass-mixins
I have found a similar solution, but without the need of the unicode characters:
http://dusted.codes/making-font-awesome-awesome-using-icons-without-i-tags