• Skip to main content

Katrina Moody

A geek in love with Coffee, Coding, WordPress and Life

  • Home
  • Blog
  • Kat’s Cafe
  • Rare Disease Day
  • About
You are here: Home / Blog

Blog

May 13 2014

Geeky Tools: FontIcons – Custom Font Kits for Your WordPress Site

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…

  1. You aren’t limited by one massive library of font icons (I LOVE Font Awesome but it’s a big bite of code!).
  2. You don’t have to worry about dozens of little images, whether they are low-res, blurry and horrible to look at.
  3. You can say goodbye to sprite maps (believe me – I’d celebrate over that one all by itself!).
  4. Use CSS instead of Photoshop for styling – your site load times will thank you!
  5. Speed up your site by integrating JUST the icons your site needs (or wants!)
  6. Use Fonticons’ Global CDN for lightening fast load times and integration into your site!
  7. 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.

 

Written by Katrina Moody · Categorized: Geeky Reviews, Typography, WordPress · Tagged: Embedding Custom Fonts, GeekyTools, WordPress Snippets

Jan 01 2009

Notes on Life, me, and the New Year …

From the Moody Archive: 1/1/2009

Okay, well, that subject title sounded all lofty and everything, didn’t it?

But seriously, I want 2009 to be different from 2008 in so many ways, some big and some small. I accomplished a lot of little things this past year, and I’m good with that. But there’s so much more I want for this year …

1. I want to be a better mom, in the little ways: More patient, more cognizant of all the little ways my guys are miracles, more thankful for every day we have as a family.

As most of you know, I have special little boys and they face so many challenges. We head into the new year learning that my youngest has developed permanent hearing loss, both sides. He’s been sick and even spent the last two days dealing with the fallout from seizures. We pray that God’s will might be accomplished in his life this year, that the doctors and nurses and therapists will have grace and wisdom in working with him and improving his care. And especially, that freakin’ Medicaid will find it within their bureaucratic little hearts to consider paying for his therapy.

We’ve also got to deal with further seizures in my oldest as well as severe orthodontic work in my middle guy. None of it promises to be easy to “fix” and they have had to work for so much more than these listed issues. So pray for my other two guys, that the Lord would help them strive toward their full potential every day.

2. I want to be a better wife.

In a world where divorce is more common than marriage it seems, let me be grateful and respectful of the love we have for each other, even if we sometimes forget it. God, give me the patience to stay with my man through these tough times. Give me the ability to stay calm through the times of stress and keep my focus on you, Lord.

I have a few personal goals I’m not totally comfortable sharing until I’ve thought about them a little more, but one includes losing some weight 🙂

My faith is a big part of who I am, and I want to live with that truth front and center as we head into the new year.

To any who wander through this journal … have a safe and  HAPPY NEW YEARS!!!!

Hugs,
Kat

Enhanced by Zemanta

Written by Katrina Moody · Categorized: Uncategorized · Tagged: Being a Special Needs Mom

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Facebook
  • Twitter
  • Instagram
  • Email
Copyright © 2021 Katrina Moody · Log in