Archived topic
How to use the icon of this theme?
7 replies · Started by Jusung on March 6, 2023
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;
}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-right SVG 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 URL property 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-left
I 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?
Hi Jusung,
Try reducing the z-index value in the CSS code you shared here from 99999 to just 100.
Thank you!!
It is resolved!
You're welcome, Jusung!
