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:
2. Add CSS to Your Style Sheet
Next, open up your style sheet (style.css). Copy/paste the following code before your Media Queries.
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.
Did you find this blog or tutorial helpful?
Like my Signature? Get the Signature Widget for Genesis right here!
Derek says
June 18, 2016 at 9:11 amI 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.
Anita C says
June 18, 2016 at 9:15 amThanks Derek! Glad it helped you. Great site and use of the Author Pro theme too!
ginger and scotch says
June 25, 2016 at 3:32 amHi 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.
ginger and scotch says
June 25, 2016 at 3:34 amNever 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.