Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 2, 2021 at 4:41 pm #1284808
    Eagerbob

    Hello,
    I want to replace the next and prev arrows in easy slider with my own. Made a custom icon font in fontello and added that in the enfold theme settings. Works fine and I can use them on pages etc.

    Now I want to change the arrows in the slider I use the “minimal black” settings.
    Plan was to change the ::before pseudo-element in my custom.css to my new icons but I can’t seem to figure out how this works.

    I see how I can change the font-family like so:

    html body [data-av_iconfont='etoile']:before {
font-family: 'etoile';
}

    But how to select the right icon (the arrow I made)?

    Thanks

    March 3, 2021 at 8:12 pm #1285114
    Victoria

    Hey Andre,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    March 3, 2021 at 8:34 pm #1285133
    Guenni007

    open a text-block and insert an icon –
    or place the alb element Icon-box etc til you see this:

    hover the icon you like to have – you will see the charcode of that icon – remember that code ( but erase the u in it)
    PS: that backslash has on windows keyboard its own place and is often written to that Keyboard key. on mac OS it is a combination of ( Option – Shift – 7)

    then in css you can use it as:

    .custom-class {
content: "\e881" ;
font-family: "etoile";
}
    March 4, 2021 at 12:05 pm #1285356
    Eagerbob

    Victoria and Guenni007, thanks for your response.

    Staging website is here: http://headstart.design/etoiles/
    it is the second slider, in the ABOUT section http://headstart.design/etoiles/#about

    I was already deep into the rabbithole, making modifications to the /config-templatebuilder/avia-shortcodes/av-helper-slideshow.php file, where the HTML for the slider controls is generated. This is offcourse not upgrade proof, so I rather do it the simpler way.

    I look further into the CSS thing, see if I can get that to work.

    March 4, 2021 at 4:37 pm #1285434
    Eagerbob

    Guenni007,
    brilliant, that worked.
    Your tip for removing the “u” was very helpful.
    pretty sure that I would not have found that easliy.

    THANKS!

    #top .avia-slideshow-arrows a:before {
	background:none; //remove existing background	
}
#top .avia-slideshow-arrows a.next-slide:before {
	font-family: 'etoile';
	content: "\e805";
	font-size:48px;
	color:black;	
}
#top .avia-slideshow-arrows a.prev-slide:before {
	font-family: 'etoile';
	content: "\e806";
	font-size:48px;	
	color:black;	
}
.avia_desktop .av_slideshow.avia-slideshow-2 .avia-slideshow-controls a {
	  opacity: 1;
	  filter: alpha(opacity=1);  //arrows always visible
}
.avia-slideshow-2 li img {
	width: 80%; //arrows outside slide image
}
    March 4, 2021 at 7:57 pm #1285511
    Victoria

    Hi Eagerbob,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.