Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to use icon fonts, the future of web design

How to use icon fonts, the future of web design

Humans have been using symbols to communicate since the beginning of time. Imagine a caveman drawing a circle to design the first wheel. A pirate marking the location of his buried treasure. A millennial texting a poop emoji. Take a look around. Icons used for communication are everywhere. They can be used to signal a specific action (like a stop sign), point the way to an exit, or express human emotion.

icon-fonts-future-web-design-stop

icon-fonts-pinterest

Icon fonts are exactly what they sound like. They are font families that are made up of a series of symbols rather than traditional letter characters.

If you grew up in the 90s like me, your first icon font experience was probably with Wingdings in Microsoft Word. Wingdings assigned a different symbol to each key on the keyboard. There were icons for all the latest technology including monitors, keyboard, mouse, trackball, hard drive, diskette, tape cassette, printer, fax machine, etc. I don’t remember getting much utility out of the font, but it was fun to write coded messages to friends during computer class.

Today, icon fonts have become an important tool for responsive web design. With a plethora of screen sizes and resolutions to design for, a go-to icon font has become the web designer’s secret weapon.

A go-to icon font has become the web designer’s secret weapon. Tweet

icon-fonts-future-web-design-screens

Icon fonts are awesome because they are lightweight, easy to use, and scale to look sharp on any screen size or resolution. Fonts produce vectors, so you can blow them up and put them on a billboard or shrink them down to fit on your phone screen without pixelation. You also don’t need to create multiple images for icons. You don’t need to configure CSS sprite maps. You don’t need to learn the ins and outs of SVGs. Just install the font on your project and place the HTML code for the icons you need.

They can also be easily modified like a traditional letter font using CSS to change color, size, add a shadow, hover effect, etc. This makes icon fonts extremely adaptable and easy to work with.

To see icon fonts out in the wild, look no farther than your WordPress dashboard. Each icon next to an administrative menu item is part of the WordPress icon font family Dashicons.

When creating a new custom post type, you can style the administrative menu icon using Dashicons that have shipped with WordPress since version 3.8.

One of the most widely used icon font families is Font Awesome. Font Awesome gives you access to a library of 675 (and growing) icons that are flexible, easy to use, and updated regularly. Like WordPress, Font Awesome is open source and free to use on commercial projects.

The easiest and fastest way to use Font Awesome on your website is to pull the font and associated CSS toolkit files directly from a CDN. Simply copy and paste the code below to your functions.php theme file and you’re ready to start using Font Awesome on your WordPress site.

/**
 * Adds Font Awesome support
 */
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );

function prefix_enqueue_awesome() {
	wp_enqueue_style( 'prefix-font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
}

You can also download the files and host them locally.

Once Font Awesome is installed, you can start using any icon from the Font Awesome icon library in your theme. Scan through the library, find an icon you like, and copy and paste the code where you want it to appear. Then format the icon using CSS and you’re all set!

Icons can be used anywhere in a theme, but here are a few great use cases:

  • A hamburger icon for your responsive mobile menu
  • Social icons in the footer
  • Icons for your address, phone number, and email
  • Subtle icons next to forms or login fields

icon-fonts-future-web-design-example

If you’re looking to add icons in your WordPress menu, look no further than the Font Awesome 4 Menus plugin. This plugin allows you to easily add icons next to each menu item. Ever needed to add a social icon to the end of a menu bar? This plugin can help with that too, as icons can stand by themselves.

Installing and using the plugin is easy. Start by installing the Font Awesome 4 Menus plugin from the WordPress directory and activate it.

Next go to Appearance > Menus and select the menu item you want to add the icon to. Then type in the Font Awesome class corresponding to the icon you want to add into the CSS Classes field. For example, if you want to add a home icon next to your “Home” link, type fa-home into the CSS Class field.

Note: If you don’t see the CSS Classes field you might need to go to “Screen Options” in the upper right of your screen and check the box next to that item for it to appear.

Save your menu and view your site. There should now be a small home icon next to your home link. Continue this process for any other link icons you would like to add.

For a stand-alone icon, delete the menu item title and only fill in the CSS class for that item.

Font Awesome 4 Menus automatically adds the Font Awesome scripts necessary for it to appear on your website. If you added Font Awesome manually to your theme, make sure to disable it or Font Awesome will technically load twice.

Icon fonts have become a staple of responsive web design and their use will only continue to grow. Their flexibility and ease of use make icon fonts a great tool for any web designer.

How do you use icon fonts in your projects? Are there any “must have” WordPress plugins we should try? Tell us in the comments below!

2 Comments

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free