After watching Kevin Geary’s latest tutorial video on pseudo elements, it got me excited to experiment with using font awesome icons as pseudo elements.
1. Enqeue Font Awesome on your site
Add this code snippet:
add_action( 'wp_enqueue_scripts', 'tthq_add_custom_fa_css' );
function tthq_add_custom_fa_css() {
wp_enqueue_style( 'custom-fa', 'https://use.fontawesome.com/releases/v5.0.6/css/all.css' );
}2. Markup Your Text Element
Next, open your page and navigate to the element you want to add the icon to.
In this example, I went to my blueprint site and added a class to the h1 heading element on my design page. I use this page to output a UI kit for sites I am working on. Its undergoing lots of tweaking but happy to share the shortcode if anyone is interested.
I chose to add the ‘heading’ class (original, I hear you say).
I then set the layout to flex.
While the class is still selected, I select the :before pseudo class and added var(–space-m) (from automatic.css) to the right margin (after changing all px values to none on all margin settings).
I then added the unicode for the icon I wanted to the content area with a backslash. In this example it is: \f00c.
I added the following CSS to the heading::before class :
font-family: "Font Awesome 5 Free";
I then set the typography height to 100% (so this will respect the size when its used with other heading elements).
And that’s all there is to it.
I then selected the other heading elements, h2, h3, and added the ‘heading’ class and it output the icon, respecting the font and other styling I previously applied.
I hope you find this useful. Drop me a comment if you have any questions or tips or if there is a better way of achieving the same result.
