Just recently I updated my Genesis eNews Extended widget to include an email icon in the widget title. Below are the instructions on how to add the icon.
1. Enqueue Dashicons
This tutorial is using the Dashicons to render the email icon. Dashicons will need to be enqueued prior to using them. You can check your functions.php file to see if you can locate them. If not, you can copy/paste the following code to the bottom of that file:
//* Enqueue Dashicons | |
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' ); | |
function enqueue_dashicons() { | |
wp_enqueue_style( 'dashicons' ); | |
} |
2. Add CSS to Your Style Sheet
Next, open up your style sheet (style.css). Copy/paste the following code before your Media Queries.
.enews-widget .widget-title::before { | |
content: "\f466"; | |
display: inline-block; | |
font: 50px/1 "dashicons"; | |
margin-right: 20px; | |
vertical-align: text-top; | |
} | |
.enews .widget-title { | |
font-size: 3.2rem; | |
} |
You may need to adjust the font size to fit your theme.
Save it.
I added this code last night and not 1 problem at all. Even after updating the framework to the latest version, the icon still in it’s current location.
Thanks for the code and I love all your blog posts. Was lurking around for awhile the other day.
Thanks Derek! Glad it helped you. Great site and use of the Author Pro theme too!
Hi Anita – thank you so much for sharing this! I just tried it and it worked. Can I ask if there is a way to make the icon smaller? It’s slightly big for my theme.
Never mind my question in the last comment – just realized the answer to my own question and have fixed the icon size. Thanks again for the tutorial.