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);
}
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
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.