• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » How to Add an Email Icon Next to Your eNews Extended Title

Published on June 12, 2016 / Published on June 12, 2016 / Reading Time: 1 minute

How to Add an Email Icon Next to Your eNews Extended Title

add email icon to enews extended widget title(3)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' );
}
view raw functions.php hosted with ❤ by GitHub

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;
}
view raw style.css hosted with ❤ by GitHub

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.

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrint

    Filed Under: Genesis Framework, Tutorials Tagged With: Aweber, Constant Contact, FeedBlitz, feedburner, genesis, mailchimp

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Reader Interactions

    Comments

    1. Derek says

      June 18, 2016 at 9:11 am

      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.

      • Anita C says

        June 18, 2016 at 9:15 am

        Thanks Derek! Glad it helped you. Great site and use of the Author Pro theme too!

    2. ginger and scotch says

      June 25, 2016 at 3:32 am

      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.

    3. ginger and scotch says

      June 25, 2016 at 3:34 am

      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.

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy