[Support request] Next and Previous in one row SVG

[Marc]

I have used this:
https://generatepress.com/forums/topic/next-previous-in-one-row/
But since the next and previous arrows are now SVG, I can’t figure out how to get them in one row. I guess this has to be done in php?

thnx

[Leo]

Hi there,

Is the issue visible somewhere?

I just checked a post and the post navigation is indeed in one row:
https://www.screencast.com/t/DLcHlMrRN

Let me know 🙂

[Marc]

Thanks for the quick reply Leo,
I was toying around with it when you checked. I basically removed the svg using all of the following code:

.nav-next .next:after
{
content: “\f105”;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
position: relative;
margin: 0 .6em;
width: 0px;
text-align: center;
color:#cccccc;
-webkit-font-smoothing:antialiased;
}

.nav-next
{
float:right;
}

.nav-previous
{
float:left;
}

.nav-previous .prev:before
{
content: “\f104”;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
position: relative;
margin: 0 .6em;
width: 13px;
text-align: center;
color:#cccccc;
opacity: 1;
}

.nav-next .next:before
{
display: none;
}

.nav-previous .icon-arrow svg,
.nav-next .icon-arrow svg
{
display: none;
}

.nav-next, .nav-previous
{
display: inline;
}

.nav-previous
{
color:#cccccc;
}

Still curious as how to do it using the svg though.

regards
Marc

[Leo]

Can I see the issue live somewhere?

Thanks 🙂

[Marc]

I got it working using Font awesome and hiding the SVGs.
This works for me, but I’m worried that it slows down loading time.
My real question is how can I get the same results with the svgs.

Thnx

[Leo]

I’m not sure what issues you are having with SVGs.

Can you show me?

[Author]

Posts