Archived topic
Page Navigation icons
5 replies · Started by Baz on January 5, 2021
Hi, I have changed the standard numbered page navigation to a simple 'Older posts / Newer posts' navigation. I have added left and right symbols using this code:
.nav-previous .prev a:before {
content: "❰";
padding-right: 10px;
}
.nav-next .next a:after {
content: "❱";
padding-left: 10px;
}However, on some occasions the symbols are replaced with characters (see screenshot) and back to symbols after the screen is refreshed. I'm using the SVG Icon theme option so not sure if this is causing this behaviour.
Would I be better off using SVG icons instead of symbols? If so, how would I include them in the above code?
This is on a local host so I cannot show you a live site example.
Thank you.
Hi there,
The CSS method should work.
Any chance you can duplicate the issue on a live/staging environment so we can try to identify the issue?
Hi Leo,
It's difficult to duplicate the issue as it only happens sometimes (I got lucky with the screenshot).
Once you click on the navigation link and the page refreshes, the specified "❰" symbols return and it doesn't happen again for a while. I'm not sure if it's a theme issue or local host issue (latest chrome build on Windows 10/XAMPP).
Can we still include HTML symbols in CSS code if selecting the SVG Icons theme option? I wasn't sure if this could be causing some sort of conflict.
Thanks.
Issues like this shouldn't happen "sometimes" as the code is static.
Perhaps there is a werid plugin conflict somewhere?
Maybe try disabling all plugins except GP Premium to test?
Thanks Leo.
Yeah, it's a weird one!
I will also try using a different CSS entity reference e.g. ' \276E' for one of the other nav links and see if that makes any difference.
Thanks again for looking into this Leo.
No problem :)
