- This topic has 7 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
I am trying to make image slider on product page.
Is there a way to use the built in icon on generatepress theme, which are <, >.
Now, the image is not showing.ul.flex-direction-nav { position: absolute; top: 48%; z-index: 99999; width: 100%; left: 0; margin: 0; padding: 0px; list-style: none;} li.flex-nav-prev {float: left;} li.flex-nav-next {float: right;} a.flex-next {visibility:hidden;} a.flex-prev {visibility:hidden;} a.flex-next::after { visibility:visible;content: '\f054'; font-family: 'Font Awesome 5 Free'; margin-right: 10px; font-size: 20px; font-weight: bold; } a.flex-prev::before { visibility:visible; content: '\f053'; font-family: 'Font Awesome 5 Free'; margin-left: 10px; font-size: 20px; font-weight: bold; } ul.flex-direction-nav li a { color: #ccc; } ul.flex-direction-nav li a:hover { text-decoration: none; } .flex-control-thumbs { display: none; }Customer Support
Hi there,
you can’t load the SVG icons from the theme using CSS.
But you can URL encode an SVG using this site:https://yoksel.github.io/url-encoder/
So:
1. get the
angle-rightSVG HTML from Font Awesome:https://fontawesome.com/icons/angle-right?s=solid&f=classic
,which looks like:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 41.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>1.1 We clean that up and add a
fill="#fff"attribute for your color, so the SVG looks like:<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="#fff"><path d="M246.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 41.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>2. We pass that through: https://yoksel.github.io/url-encoder/
2.1 And get the background
URLproperty from the css it generated ie.url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='%23fff'%3E%3Cpath d='M246.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 41.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");3. You can then use that in your CSS like so:
a.flex-next::after { visibility:visible; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='%23fff'%3E%3Cpath d='M246.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 41.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E"); height: 30px; width: 30px; }Repeat the process with the FA icon
angel-leftI did what you said,, but the size is different..
Did you use pro icon?? the left one is much bigger than right one.a.flex-prev::before { visibility:visible; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='%23fff'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E"); height: 30px; width: 30px; }It was this one i used:
I figured it out. I just downloaded the image from other sources and use it there.
One problem is that when I click the enlarge magnifier icon on the top and right side, I can still see the arrow.
The arrow is supposed to removed when the magnifier icon is clicked.
Could you fix this?Customer Support
Hi Jusung,
Try reducing the z-index value in the CSS code you shared here from
99999to just100.Thank you!!
It is resolved!
You’re welcome, Jusung!
- You must be logged in to reply to this topic.
