In this article, we’ll cover how to customize which Font Awesome icons are used in various places in the theme.
In version 2.7 of our theme framework, we made the big update from Font Awesome version 4 to 5. One of the big changes here was that Font Awesome is now implemented with JavaScript. For those who were customizing icons via CSS by changing the content value, this will no longer work.
But fear not, you can still customize every Font Awesome icon used in your theme. But instead of using CSS, you’ll be using PHP to filter the actual output of icons from your child theme’s functions.php.
Code Examples
In every instance that the theme outputs a Font Awesome icon, the icon names are filtered in some way. So from your child theme’s functions.php, you can utilize these filters to affect which icons are outputted.
Throughout the following code snippets, you’ll see generic Font Awesome icon names used like shopping-cart, for example. The theme framework has a way of taking these icon names, determining the icon style, and generating the proper CSS classes for Font Awesome.
However, in every instance discussed below, if you’d like to specify the icon style used, you can pass the exact Font Awesome classes. For example, instead of shopping-cart, you could pass fal fa-shopping-cart to specify the shopping cart icon of the light icon style (if you’ve added light style icons to your website, that is). This will be really useful for Jump Start customers using the Font Awesome extension to implement additional icons and styles.
Shopping Cart Icon
One of the most common icon change requests is for the icon representing the shopping cart, when WooCommerce is enabled. Many people are looking to change this from the default shopping-basket icon to the more traditional shopping-cart icon.
The theme framework has two separate instances of icons that link to the WooCommerce shopping cart, one of desktop and another for mobile. You can use the filter themeblvd_shopping_cart_icon_name to modify the icon used in both instances. This filter passes a string, representing the icon name.
/**
* Change the icon used to link to the WooCommerce
* shopping cart.
*
* @return string Icon name.
*/
function my_shopping_cart_icon_name() {
return 'shopping-cart';
}
add_filter( 'themeblvd_shopping_cart_icon_name', 'my_shopping_cart_icon_name' );
Language Switcher Icon
When using WPML, the globe icon is used to link to the theme’s custom language switcher modal. Maybe instead of a globe, the language icon might be a good alternative. You can change this icon with the filter themeblvd_lang_popup_trigger_icon_name, which passes a string representing the current icon name.
/**
* Change the icon used to open the floating
* language switcher modal with WPML.
*
* @return string Icon name.
*/
function my_lang_popup_trigger_icon_name() {
return 'language';
}
add_filter( 'themeblvd_lang_popup_trigger_icon_name', 'my_lang_popup_trigger_icon_name' );
Search Icon
I honestly can’t think of a logical reason for changing the search icon, but the filter themeblvd_search_icon_name will allow you to do just that.
/**
* Change the icon used to open the floating
* search modal.
*
* @return string Icon name.
*/
function my_search_icon_name() {
return 'fab fa-searchengin';
}
add_filter( 'themeblvd_search_icon_name', 'my_search_icon_name' );
Also note that if you wanted to only change the icon in the header that opens the search modal (i.e. what you see in the first screenshot above), you can use the filter themeblvd_search_trigger_icon_name instead.
Contact Icons
Over the years, Font Awesome has grown to include several different icons to represent the different social media services. So if you’re wanting to adjust which icons are used for the contact links you set up at Theme Options > General > Contact, you can use the filter themeblvd_contact_bar_icon_name, which passes a string representing the current icon name.
In the following example, we’ll take several icons from our contact bar and change them to use the -square style instead of the default. So for example, twitter will be become twitter-square, and so on.
/**
* Change icons used with the contact bar.
*
* @param string $icon Current icon name.
* @param string $type Original icon identifier.
* @return string $icon Maybe modified icon name.
*/
function my_contact_bar_icon_name( $icon, $type ) {
/*
* If the $type matches any of the icons we're looking
* to change, let's do that.
*
* Because the theme does make some adjustments to the
* actual icons implemented, it's best to use $type to
* check for which icon you're changing.
*
* The $type parameter represents the original icon
* identifier before the theme made any changes to what
* results into the final $icon you're filtering.
*/
switch ( $type ) {
case 'facebook':
$icon = 'facebook-square';
break;
case 'google':
$icon = 'google-plus-square';
break;
case 'pinterest':
$icon = 'pinterest-square';
break;
case 'twitter':
$icon = 'twitter-square';
break;
case 'vimeo':
$icon = 'vimeo-square';
break;
case 'youtube':
$icon = 'youtube-square';
break;
}
return $icon;
}
add_filter( 'themeblvd_contact_bar_icon_name', 'my_contact_bar_icon_name', 10, 2 );
Main Menu Sub-Indicator Icons
Font Awesome has several different icons for indicating direction and so it’s possible you may want to use different icons to indicate submenus in the main navigation. The theme framework uses angle-down and angle-right. But another logical choice might be to use the icons, caret-down and caret-right, for example.
You can use the filter themeblvd_sub_indicator_icon_name to change the current icon name used for a given sub-indicator. It’s important to take into account the $direction parameter when using this filter. The direction will be down on the first level of the navigation and right on sub-levels.
/**
* Change the icons used in the main navigation to
* indicate a dropdown menu.
*
* @param string $icon Icon name.
* @param string $direction Direction indicator should point, `down` or `right`.
* @param string $icon Modified icon name.
*/
function my_sub_indicator_icon_name( $icon, $direction ) {
switch ( $direction ) {
case 'down':
$icon = 'caret-down';
break;
case 'right':
$icon = 'caret-right';
break;
}
return $icon;
}
add_filter( 'themeblvd_sub_indicator_icon_name', 'my_sub_indicator_icon_name', 10, 2 );
Share Link Icons
At Theme Options > Content > Single Posts, you can configure which networks display within the share links in the footer of single posts.
To change the icons outputted with the links you’ve chosen, you can use the filter themeblvd_share_patterns. This filter passes an array of the sharing patterns used to create these links. Conceptually, using the filter to just change the icons is a little confusing, but just use the following code example as a template for changing the icon names you want.
/**
* Change the icons used within the article
* sharing patterns.
*
* @param array $links Sharing patterns.
* @return array $links Modified sharing patterns.
*/
function my_share_links( $links ) {
$links['digg']['icon'] = 'digg';
$links['email']['icon'] = 'envelope';
$links['facebook']['icon'] = 'facebook';
$links['google']['icon'] = 'google-plus';
$links['linkedin']['icon'] = 'linkedin';
$links['pinterest']['icon'] = 'pinterest-p';
$links['reddit']['icon'] = 'reddit';
$links['tumblr']['icon'] = 'tumblr';
$links['twitter']['icon'] = 'twitter';
return $links;
}
add_filter( 'themeblvd_share_patterns', 'my_share_links' );
Meta Icons
We refer to the information that displays below post titles in your blog as the “meta information.” To change the icons used here, you can use the filter themeblvd_meta_icons. This filter passes an array containing all of the icons. You can use the following code example and adjust, as needed.
/**
* Change the icons used for the meta information.
*
* @param array $icons {
* Icon names.
*
* @type string $time Icon name for the publish date.
* @type string $author Icon name for the post author.
* @type string $comments Icon name for comments number.
* @type string $category Icon name for post category.
* @type string $portfolio Icon name for portfolio of a portfolio item post.
* }
* @return array $icons Modified meta icon names.
*/
function my_meta_icons( $icons ) {
$icons['time'] = 'clock';
$icons['author'] = 'user';
$icons['comments'] = 'comment';
$icons['category'] = 'folder';
$icons['portfolio'] = 'briefcase';
return $icons;
}
add_filter( 'themeblvd_meta_icons', 'my_meta_icons' );
Post Format Icons
When a post has a post format set, it will include an icon to represent that format in the meta information, which can’t be changed by the previous filter. These post format icons also show up in other places like search results.
To change the icons globally associated with each post format, you can use the filter, themeblvd_format_icons. This filter passes an array of key, value pairs, where the keys are the post formats and the associated values are the icon names.
/**
* Change the icons associated with each
* post format.
*
* @param array $icons Icon names.
* @return array $icon Maybe modified icon names.
*/
function my_format_icons( $icons ) {
$icons['standard'] = 'pencil-alt';
$icons['audio'] = 'volume-up';
$icons['aside'] = 'thumbtack';
$icons['attachment'] = 'image';
$icons['chat'] = 'comments';
$icons['gallery'] = 'images';
$icons['image'] = 'camera-retro';
$icons['link'] = 'link';
$icons['page'] = 'file';
$icons['portfolio'] = 'briefcase';
$icons['product'] = 'shopping-basket';
$icons['quote'] = 'quote-left';
$icons['status'] = 'clock';
$icons['video'] = 'film';
return $icons;
}
add_filter( 'themeblvd_format_icons', 'my_format_icons' );
Featured Image Link Icons
Another popular request is always to change the icons that appear when hovering over a featured image with a link applied. To do this, you can use the filter, themeblvd_thumbnail_link_icon_name. This filter passes a string that represents the icon for the current type of link; the possible types include image, video, post and external.
/**
* Change the icons used with thumbnail links on
* featured images.
*
* @param string $icon Icon name.
* @param string $type Type of thumbnail link, `image`, `video`, `post` or `external`.
* @return string $icon Maybe modified icon name.
*/
function my_thumbnail_link_icon_name( $icon, $type ) {
switch ( $type ) {
// Setting: "It links to its enlarged lightbox version."
// Setting: "It links to a custom lightbox image."
case 'image':
$icon = 'plus-square';
break;
// Setting: "It links to a lightbox video."
case 'video':
$icon = 'film';
break;
// Setting: "It links to its post."
case 'post':
$icon = 'long-arrow-alt-right';
break;
// Setting: "It links to a webpage."
case 'external':
$icon = 'external-link-alt';
break;
}
return $icon;
}
add_filter( 'themeblvd_thumbnail_link_icon_name', 'my_thumbnail_link_icon_name', 10, 2 );
Toggle Icons
By default, a toggle uses the icons, plus-circle and minus-circle.
To change the icons used to open and close toggles, you can use the filter themeblvd_toggle_icons. The data passed through this filter is an array, which contains two icon names, one to open toggles and another to close them.
/**
* Adjust icons used for opening and closing toggles.
*
* @param array $icons Current icon names.
* @return array $icons Modified icon names.
*/
function my_toggle_icons( $icons ) {
// Icon for opening a closed toggle.
$icons['show'] = 'plus';
// Icon for closing an open toggle.
$icons['hide'] = 'minus';
return $icons;
}
add_filter( 'themeblvd_toggle_icons', 'my_toggle_icons' );
Testimonial Author Icon
This one is a bit more obscure, but you’ll come across this icon when you’ve implemented a testimonial element and you didn’t add an image to represent the testimonial author.
By default, the user icon is used. But let’s say we’ve got a bunch of testimonials from medical professionals and we want to use the user-md icon instead. We can use the themeblvd_testimonial_author_fallback_icon_name filter which passes a string representing the icon name.
/**
* Change the fallback icon used to represent a
* testimonial author, when no image is added.
*
* @return string Icon name.
*/
function my_testimonial_author_fallback_icon_name() {
return 'user-md';
}
add_filter( 'themeblvd_testimonial_author_fallback_icon_name', 'my_testimonial_author_fallback_icon_name' );
Title of “Link” Format Post
When applying the “link” post format, you’ll see this icon added to indicate that the title of the post is now an external link. By default the external-link-square-alt icon is used, but could be changed using the filter themeblvd_external_link_title_icon_name which passes a string representing the icon.
/**
* Changes the icon used in the title of "link"
* format posts.
*
* @return string Icon name.
*/
function my_external_link_title_icon_name() {
return 'external-link';
}
add_filter( 'themeblvd_external_link_title_icon_name', 'my_external_link_title_icon_name' );