A brand is nothing without personality.
One of the easiest ways to mix it up and show a little personality on any site, including your business site is by using fonts. You can easily use a Google Font in your site, or embed a custom font, but few things imbue more personality than going just that little bit further and playing with an icon font.
Icon Fonts like Font Awesome allow you to Present a Visual Message Efficiently
Font Awesome rocks! The problem is that Font Awesome has over 300 icons included – awesome to play with, but overkill for most sites! And most people go to the trouble to embed them and only use them for their social media icons – or to head up a services section on their site.
And that’s sad, really. Because until Fonticons, most WordPress folks embedded the whole font library. All those icons sitting unused! Not only that, but what a waste of resources and load times!
Not only that – but you saw how many sites are using Font Awesome? That’s a lot of folks sharing a lot of the same design elements on their site.
With Fonticons though, you can go one step further – you can easily pull in your own custom icons too. That makes this a geeky resource that is very useful and full of awesome sauce!
Fonticons is pure awesomeness for those of us who like geek out over icon fonts …
Dave Gandy, the icon design genius behind Font Awesome and one of the guys behind the scenes at Fonticons, summed up the benefits of using Fonticons with a tongue-in-cheek “… the message is ‘icon fonts are awesome!'”
I was pretty excited to dig into all the offerings, and I have had a lot of fun playing with my first custom kit. But I am a curious Kat – I wondered how the idea for a service like this was started. I was especially curious about the actual process of putting a custom font together. And the geek in me couldn’t resist thinking about the effect this would have on load times (important things!).
Gandy’s background as a designer and his experience with Font Awesome helped him see a need for something beyond the Font Awesome icon font library. Like most web designers, he knew the pain of integrating good icons in a website:
A bit over 3 years ago, I was complaining about how much of a pain it was to put good icons on a website. PNGs, sprite maps, CSS backgrounds, and waaaay too much time in Photoshop. So I made Font Awesome and open sourced it. It’s now on 33 million websites and growing at a considerable rate. But it’s not perfect. What if Font Awesome isn’t the exact look your site needs? What if you want to add your own icons? So we made Fonticons so people can get the perfect icons on their website.
~ Dave Gandy, Creator of Font Awesome and other icon sets, and one of two guys behind the awesome Fonticons
Wow. 33 million sites and growing daily – that’s the kind of impact Gandy’s Font Awesome has had on the web design community. That’s staggering! That totally deserves a tweet:
[bctt tweet=”33 million sites and growing daily – that’s the kind of impact Gandy’s @FontAwesome has had on the #webdesign community.”]
Considering that Font Awesome is one of eleven fonts available within Fonticons, the kind of impact and potential of such a tool is really mind-boggling! Fonticons (pronounced like emoticons with a font for the emot *grin*), is an exciting new tool for sure!
If you weren’t sure of just what the potential this kind of tool could have, let’s break down the benefits.
With Fonticons…
- You aren’t limited by one massive library of font icons (I LOVE Font Awesome but it’s a big bite of code!).
- You don’t have to worry about dozens of little images, whether they are low-res, blurry and horrible to look at.
- You can say goodbye to sprite maps (believe me – I’d celebrate over that one all by itself!).
- Use CSS instead of Photoshop for styling – your site load times will thank you!
- Speed up your site by integrating JUST the icons your site needs (or wants!)
- Use Fonticons’ Global CDN for lightening fast load times and integration into your site!
- Dude! You can copy and paste your own icons straight from Illustrator CC! That deserves an
Convinced of the Awesome Creds and Potential Behind Fonticons?
Then how about we dig into how it works so you can see just how easy it is to build a kit to use?
I’ll show how you can add a little bit of personality in an awesome, non-overwhelming kind of way.
the coolest thing since sliced bread …
So, you know how absolutely I think is, right?
Okay, okay … I HAD to play a little! Ready to get serious with me?
A Brief Introduction to Fonts
So you’ve heard of fonts, probably even know what Google fonts or other custom fonts are all about. Maybe you’ve tried your hand at embedding them in your WordPress site? A font for consistent typography throughout your blog – as in all the headers, all the body text, etc – is a little different than the kind of font we’re going to be looking at.
The concept is the same – but if you aren’t familiar with font icons this will seem like a very cool new idea to you. (And if your geeky little heart knows all about it, wait ’til I blow you mind with the specifics of this tool!)
Icon fonts are for highlighting, expanding and illustrating ideas in a visual way. They’re like the cherry on top of your ice cream cone.
[bctt tweet=”#Icon fonts are like the cherry on top of your #typography – they highlight, expand and illustrate ideas in a visual way. “]
Getting Started with Fonticons – Start small and Grow
To get the most benefit out of Fonticons, you need to consider what you want to use an icon for on your site. Social Media icons? Post format icons? Category icons? Extra design elements? Personality?
Think about what icons you need, and then you can use Fonticons to build the kit you need based on what you want for your site.
That’s it for today – while I wanted to go over the actual how-to of using the Fonticons site, that will have to wait for tomorrow. Otherwise this post is likely to turn into a short book!
Watch for the How-To Fonticon post tomorrow, and I already planned to followup with a WordPress How-To on how to integrate Fonticons in your site properly (there’s a little bit of code and geekery there!)
In the meantime, check out some of the things you can do with Fonticons:
Go up to the logo in my header and you can see a three-piece logo for Kat’s Media. I put it together to test out Fonticons and to play with transitions and hover effects in CSS. You like?
My logo is tame compared to the Fonticons one. I did a quick screen recording of the hover effect – see what you think!
While you couldn’t miss the icons sprinkled in this post – check out the home page of my site and see another simple example – the briefcase midway down the page and above my services? Inserted with some fun Fonticons and a tweak to my CSS.
Curious about Fonticons or integrating custom font icons in your site? Let me know any questions you have – I’ll make sure to address them in the next post.
