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:

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

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