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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

How To Add A Icon After A Read More Link

The CSS code below adds any Dashicon after the read more link on your archive pages.

Here’s the default read more link with a bit of styling:

standard more link

Here’s what your read more link looks like now:

icon after more-link

There’s 2 steps to get the dashicons to work:

  1. Add some PHP code to your child themes functions file to enqueue dashicons for use on the front end.
  2. Add CSS code to your child themes style.css file.

2. PHP

2. CSS

.more-link:after {
    content: "\f345";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 18px/1 'dashicons';
    vertical-align: middle;
    padding-bottom: 3px;
}

You may need to tweak the CSS values depending on which theme you’re using and your existing styling.

Style Read More Link

Here’s some sample CSS taken from code you can modify.

.more-link {
    background-color: #0099CC;
    color: #fff;
    width: auto;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    line-height: 1.625;
    padding: 6px 12px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
}

Modify the Read More Link Text

Related Content

  • How To Add Dashicons In WordPress

Read More

Reader Interactions

Comments

  1. Bart says

    July 4, 2014 at 11:58 am

    Hi Brad, I’ve tried some of this css and ‘vertical-align: middle;’ doesn’t seem to work over at my site with Genesis Parallax? Do you have an alternative or fix for centering the read more button.
    Thanks, Bart

    Log in to Reply
    • Brad Dalton says

      July 4, 2014 at 12:23 pm

      Hello Bart

      Try adding padding-top or padding-bottom to position the dashicon.

      You can see i added it in step 2. padding-bottom: 3px;

      Looks like there’s a small issue with your CSS at the end of your file.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.