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:
| //* 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.
**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!