Updated on April 11, 2018 In the past, I wrote a tutorial on How to set up Font Awesome icons above menu items in WordPress. That method involves loading Font Awesome’s CSS and showing the icons using pseudo selectors. This tutorial provides the steps to use the new Font Awesome 5’s SVG icons instead. We […]
font awesome
Font Awesome icons above menu items in Kreativ Pro
In the comments section of How to set up Font Awesome icons above menu items in WordPress, a member asked: I would like to do this for the secondary-nav menu in Kreativ Pro Theme. I am displaying categories there. What is the set-up for that? This tutorial provides the steps to add Font Awesome icons […]
Font Awesome’s magnifying glass web font as search button text in Genesis
In the comments section of my old How to replace search button text with a icon font in Genesis tutorial, a user asked: I noticed when I enqueue Font Awesome 5, the search icon from this tutorial disappears, does that have something to do with the new icons being SVG? In this tutorial, I share […]
How to load and use Font Awesome 5 in WordPress
Updated on May 07, 2018 Font Awesome 5 has been recently released with SVG vector icons compared to the earlier icon fonts. In this tutorial, I share detailed steps on how to load and use Font Awesome 5 in WordPress using both the methods (CSS Pseudo-elements and inline SVG) for free and Pro versions. SVG […]
How to set up Font Awesome icons above menu items in WordPress
In the comments section of How to display custom menu with menu descriptions and icons in a WordPress widget, a user asked: How would I position them? I’ve replicated what you did in the tutorial, but I can’t get the icons above the text using CSS. Thanks for your help! We can automatically generate CSS […]
Thin Font Awesome Close Icon
As of v4.7.0, FontAwesome does not have a thin close (x) icon. <i class="fa fa-times fa-2x" aria-hidden="true"></i> results in, for example, To display a thin icon instead, add this CSS: .fa-times-thin:before { content: ‘\00d7’; } and this sample HTML: <i class="fa fa-times-thin fa-2x" aria-hidden="true"></i> The result: Much better! Source: https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
Responsive side menu with search form in Genesis using Font Awesome and Sidr in Genesis
In the comments section of Adding a responsive side menu in Genesis using Sidr a user wanted to know how a search form can be shown in the side menu with the Submit button replaced by a Font Awesome icon. In this tutorial I share the steps for adding a search form floated to the right of Primary Navigation […]
Using PowerTip to display mouse-following tooltips for Font Awesome Icons in WordPress
In the members-only forum, a user asks: What must be done to use the jQuery PowerTip on some Font Awesome Icons in Textwidgets in your Genesis Sample? Something like this on a text link in a widget. In this tutorial I show how tooltip text can be set up for social media icons in a […]
Circular Color Bullets for List Items using Font Awesome
Please do not follow the tutorial below until further notice. There is currently a problem with the code that’s causing the click region for links inside list items to work erratically. Until I figure out a solution you may want to follow this method. While it is possible to set up color bullets for unordered […]
Adding Search in Navigation with Font Awesome search icon outside the box in Genesis
functions.php: To view the full content, please sign up for the membership. Already a member? Log in below or here.
Recent Comments