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.
If you are unfamiliar with working with your theme files, stop and ask for help. If you are familiar with modifying your theme files – you should back them up before proceeding.
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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.
**If you would like the email icon to be centered above the title, change line 3 from “inline-block” to “block”.
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.