@davegandy wrote this on 23 Nov 2015 Tweet
We’re super excited to announce that today we released Font Awesome 4.5! This release includes:
p.s. Check out how you can take Font Awesome to the next level or even include your own icon!
@davegandy wrote this on 25 Sep 2014 Tweet
Font Awesome comes with lots of file type icons already. But what if you have a file type that's not a part of the set? No problem.
With a bit of custom CSS, we can get just about any file type icon we need. By using stacked icons, we can mix existing file type icons alongside our custom file types. And we can stack icons or text just as easily.
See the Pen KnzJg by Dave Gandy (@davegandy) on CodePen.
The first audio file type icon is included in Font Awesome already. The second, representing a settings document, is a gear icon stacked on an outlined file icon. And the third is an easy way to generate an icon for any three letter filetype.
<i class="fa fa-file-audio-o"></i>
<span class="fa-stack">
<i class="fa fa-gear fa-stack-1x"></i>
<i class="fa fa-file-o fa-stack-2x"></i>
</span>
<span class="fa-stack">
<span class="fa-stack-1x filetype-text">PSD</span>
<i class="fa fa-file-o fa-stack-2x"></i>
</span>
The first thing we need to do is push down the stacked icons and text so they align in the lower section of the outlined
file icon. Then we size down the .fa-stack to make it the same size as our normal icons, then adjust the stack
vertically so things are properly aligned. Finally, we grab an excellent condensed Google Web font so we can make the
text as large as possible.
.fa-stack-1x { top: .25em; }
.fa-stack {
font-size: .5em;
vertical-align: -16%;
}
.filetype-text {
font-size: .7em;
font-weight: 700;
font-family: 'Oswald';
}
Et voilà. Custom file types using stacked icons.
Have some improvements for the method above? Drop us a note on Twitter at @fontawesome.
@davegandy wrote this on 09 Jul 2014 Tweet
3,000 Black Tie Kickstarter backers at any dollar amount gives the original Font Awesome major upgrades. Only 7 days left to back this project!
First of all, thank you to so many of you for helping Black Tie reach its initial goal in just 6 days. I'm crazy excited to get started and make Black Tie awesome!
Since launching this project, I’ve received some questions about the future of the original Font Awesome, as well as requests for improvements to it. Although I am venturing into the commercial realm with Black Tie, I am completely committed to maintaining and improving the original Font Awesome. To show that commitment, I’ve added individual and group rewards to the Black Tie Kickstarter, which will specifically benefit the original Font Awesome.
With only 7 days remaining, I really need your help to get the word out. As a thank you for helping me spread the word about Black Tie, I will give the original Font Awesome some major upgrades if the Kickstarter reaches 3,000 backers at any dollar amount. Even a single $1 donation counts toward the backer total. So please back Black Tie and help me spread the word! Twitter, Facebook, relevant forums. Any and every donation helps!
If the Black Tie Kickstarter reaches 3,000 backers at any dollar amount, Font Awesome will see some major upgrades very soon:
For those that would like to specifically support the original Font Awesome, I've also added a reward that includes a limited edition Font Awesome T-shirt.
Font Awesome is currently on nearly a million websites – so I’m really hoping we can find 3,000 backers who are willing to support upgrades to the project! If not, Font Awesome will still get most of these upgrades eventually. As I said, I'm committed to continuing to improve Font Awesome. But support from the Kickstarter means I'll be able to prioritize it much higher and get to it much more quickly. If you've found Font Awesome useful, please consider supporting this project so I can get these improvements made as soon as possible!
@davegandy wrote this on 19 May 2014 Tweet
Want to stack regular text on top of Font Awesome icons? It turns out that Font Awesome stacked icons are already pretty much what we need.
When we re-wrote the CSS in FA version 4, we separated out the icon font declaration into the fa class instead
of using a star selector. This saves us the trouble of needing to add any font-family overrides in the CSS. This would
not have been so trivial in 3.2. Here's the HTML:
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">27</strong>
</span>
The only CSS we really need to add is to vertically align the text, since the empty spot in the calendar isn't centered. So we'll push it down a tad:
.calendar-text { margin-top: .3em; }
See the Pen dlCuq by Dave Gandy (@davegandy) on CodePen.
We threw in a couple of other examples in there too. The comment icon already
happens to align vertically, so there's no extra CSS to add. The file-o icon also
works great with text after we give it a .2em top margin.
Have any great use cases for stacking text on top of icons? Drop us a note on Twitter at @fontawesome.
@davegandy wrote this on 04 Jun 2013 Tweet
Many changes are in the works for future versions of Font Awesome. Already well underway, version 3.2 adds a host of new brand icons and creates a better build process, while 4.0 will break backward compatibility to bring Font Awesome in line with best practices for icon fonts that have developed over the past year.
Font Awesome 3.2 is primarily a date-driven release, as I'm trying to keep smaller and more regular updates the norm. The release date for 3.2 is expected on Wednesday, June 12, so watch for it!
I'm now using GitHub's milestone functionality to track issues for new releases, so it's easy to see progress on the Font Awesome 3.2 milestone. As 3.2 is a date-driven release, I likely won't get to all the open issues in 3.2, but will push them into 4.0. I am trying to get all the open bugs addressed, however.
So far in 3.2, I have so far added 48 new icons. I've been going down the list of most commented icon requests to get a sense of which icons are in highest demand, with a special focus on international appeal. 8 of the world's most popular currencies have been added and over 20 new brand icons. And I'm not done yet.
I've heard loud and clear that folks really want SCSS and SASS support, so we'll make sure that's in there and in good shape for future maintainability.
And a big thank you to @robmadole for helping out so much to create a fantastic build system for Font Awesome. All CSS, LESS, and documentation generation is driven off a master icons.yml file. This means no more silly errors in updating version in documentation, missing icons in documentation, etc. Oh, and Jekyll absolutely kicks ass for static website generation.
Since Font Awesome 1.0 was released over a year ago, we've learned some things about the best way to serve icon fonts. Version 4.0 will have a prefix class (likely fa or fontawesome) along with the name of the icon (fa-heart or fontawesome-heart). As the CSS will no longer contain matching selectors, CSS rendering time will speed up quite a bit. We'll also be de-emphasizing IE7 support (though it will stay at the basic level since the cost is minimal). And we'll add Foundation support and dig into how feasible GSUB support will be.
Want to see how things are progressing or get details on the issues? I'm keeping track of the release in Font Awesome's 4.0 milestone.