There are plenty of tutorials and oodles of information floating around about icon fonts, they are all the rage right now. There are awesome things achievable with icon fonts and they can provide a lot of flexibility in your development workflow. It seems some people get the impression that using fonts as icons is overly complicated, so my goal is to provide a few simple examples of using icon fonts with the Thematic Theme Framework for WordPress.
I am going to show you how to use fonts for icons the easiest way possible, then explain a even better way afterwards, but currently the goal is just to get you setup using icon fonts with your Thematic child themes. We are going to be using a handy little API from We Love Icon Fonts.
We Love Icon Fonts with WordPress
We are going to be using the Entypo set of icons for now, but you can swap these out later for a different set. The We Love Icon Fonts sites example uses an @import, while easier, I usually avoid using @import in stylehseets for performance reasons. So lets load that instead in the header as is best practice with any stylesheets when using WordPress.
Enqueue Icon Fonts Styles
This snippet will register and enqueue the weloveiconfonts.com API styes for use in the theme, this will work for any WordPress theme, not just Thematic. Just drop this into the functions.php of your child theme, or theme if you aren’t using a child.
// enqueue font icons
function childtheme_icon_fonts() {
// registers weloveiconfonts.com icon font api styles
wp_register_style('icon-fonts-css', 'http://weloveiconfonts.com/api/?family=entypo');
// enqueue the scripts for use in theme
wp_enqueue_style ('icon-fonts-css');
}
add_action('wp_enqueue_scripts', 'childtheme_icon_fonts');
Required CSS to call Icon Fonts
Just drop this CSS in your style sheet.
[class*="entypo-"]:before { font-family: 'entypo', sans-serif; }
That’s it. Now all that is needed is to add a specific class with a name on the element to call the icon, for example .icon-home.
The CSS included in the demos is very basic, they are styled with just enough structure to get you started on making them your own. The demos were set up in Sass, so if you prefer that you can grab it off the SCSS section tab in the demo.
Social Icon Font Example
One of the most popular uses is social icons, sure you can use images, but icon fonts are cooler. This is a basic setup using Thematic’s existing structure for providing a few links to your social networks in the sidebar. :)
Social Icon Font PHP
This snippet will go in the functions.php of the child theme. We are using some existing CSS classes to keep the same structure from Thematic to keep things uniform in the sidebar, hooking the function on to the thematic_belowmainasides hook.
function childtheme_social_icon_fonts() { ?>
<div id="tertiary" class="aside main-aside">
<ul class="xoxo social-icons">
<li><a class="entypo-twitter" href="#" title="Twitter"><span>Twitter</span></a></li>
<li><a class="entypo-facebook" href="#" title="Facebook"><span>Facebook</span></a></li>
<li><a class="entypo-github" href="#" title="Github"><span>Github</span></a></li>
<li><a class="entypo-rss" href="#" title="RSS"><span>RSS</span></a></li>
</ul>
</div>
<?php }
add_action('thematic_belowmainasides', 'childtheme_social_icon_fonts');
Social Icon Font CSS
#tertiary { clear: right; }
.social-icons { list-style: none; }
.social-icons li { float: left; }
.social-icons li a {
padding: 0 0.5em;
font-size: 2em;
text-decoration: none;
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.4),
1px 1px 2px rgba(0, 0, 0, 0.4);
}
.social-icons li a:hover {
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.6),
1px 1px 4px rgba(0, 0, 0, 0.4);
}
.social-icons span { display: none; }
This example uses Twitter, Facebook, Github and RSS, the actual text will be hidden, using the icons only, but it is good practice to include it anyway.
WordPress Menu Font Icons
Inserting font icons in the WordPress menu is pretty easy, the way to do it is to add a class through the WordPress Admin built in Custom Menu functionality. There is a section “CSS Classes” where you can add the icon class you want, if you don’t see this option in the menus, check the “Screen Options” in the right top and check that option to show. Since the classes are added through WP itself, there is no additional PHP needed.
WordPress Menu Font Icons CSS
.sf-menu [class*="entypo-"]:before {
z-index: 3;
position: absolute;
top: 5px;
left: 5px;
font-size: 24px;
color: #666666;
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.4),
1px 1px 2px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.sf-menu [class*="entypo-"]:hover:before {
color: #FF4B33;
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.6),
1px 1px 4px rgba(0, 0, 0, 0.4);
}
.sf-menu [class*="entypo-"] a { padding: 9px 13px 9px 38px; }
.sf-menu [class*="entypo-"] li a { padding: 9px 13px; }
Just don’t forget you need to add the classes through the WP Admin Menu.
Navigational Font Icons
Thematic by default has two separate navigation structures, one is for navigating the Older/Newer posts and the other is on single post pages that show the title of the previous and next post. Most sites I work on do not include the navigation on the single posts. This example removes the single post page navigation and instead replaces the standard Older/Newer navigation in WordPress with some font icons to replace the default text.
Navigational Font Icons PHP
The first function completely removes the upper navigation (personal preference), instead we are only going to be using the lower navigation. The second function removes the navigation on single pages and changes the structure to give some better hooks for adding some font icons arrows instead. I also added a title in since there is no text, at least the title “Older posts” or “Newer posts” will show on hover, which is helpful.
// override nav_below functionality - remove it completely
function childtheme_override_nav_above() {
// silence
}
// override nav_below functionality
function childtheme_override_nav_below() {
if ( !is_single() ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link('<i title="Older posts" class="entypo-left"></i> <span>Older posts</span>') ?></div>
<div class="nav-next"><?php previous_posts_link('<span>Newer posts</span> <i title="Newer posts" class="entypo-right"></i>') ?></div>
</div> <?php
}
}
Navigational Font Icons CSS
.navigation {
margin: 0 0 1.625em;
overflow: hidden;
}
.navigation a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.navigation i {
font-size: 5em;
color: #666666;
font-style: normal;
}
.navigation .nav-previous {
float: left;
width: auto;
}
.navigation .nav-next {
float: right;
width: auto;
}
.navigation span { display: none; }
Now the kicker.
While this is a viable way to achieve font icons and is usable, there is a better way to do this if you are trying to keep everything optimized (as fast as possible). The idea is instead of letting We Love Icon Fonts handle the loading of the fonts, you instead use a service to trim down the fonts to exactly what you need, so you load 4 icons in the font instead of 40 and handle the serving of the font files yourself. There are some great services out there like IcoMoon and Fontello which make it a breeze. So hopefully this gives you a leg up on using font icons with Thematic.
A few complex examples.
- Icon Fonts are Awesome – Easy to Understand Demo
- Codepen Demo – Multicolored Font Icons
- Codepen Demo – Enhanced Lists
- Codepen Demo – Minimal Circular 3D Buttons
