Site logo

Archived topic

Next and Previous in one row SVG

5 replies · Started by Marc on November 7, 2019

Viewing posts 1–6 of 6

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

Can I see the issue live somewhere?

Thanks :)

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

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

Can you show me?

This archived topic is closed to new replies.