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:
- Add some PHP code to your child themes functions file to enqueue dashicons for use on the front end.
- 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);
}
Was This Tutorial Helpful?