Use own local SVG for Carousel arrows

  • Resolved darondaron

    (@darondaron)


    5 years, 5 months ago

    Hi

    I’m trying to use local Awesome fonts SVG for the Arrows and dots in the Premium Carousel.
    The Awesome icons I want to use I have stored locally in the WP Media Library.

    Would really appreciate some help or code to use, to accomplish this. Would love to be able to do the Carousel arrows and dots local as well.

    Thanks for a very good testimonial Carousel !!
    Best regards
    Daniel

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Leap13

    (@leap13)

    5 years, 5 months ago

    Hi @darondaron

    Hope you’re having a great day 🙂

    I’m so sorry, but there’s no direct option in Premium Carousel widget to achieve at the moment. So, we will need to add a custom code into your page to get this to work as you want. Our devs would be more than glad to help you with this, but please send us a message on our website.

    Regards

    Plugin Author Leap13

    (@leap13)

    5 years, 5 months ago

    Hi @darondaron

    Hope everything is going fine with you today 🙂

    Adding custom icons for carousel navigation dots/arrows is now available in Premium Addons for Elementor v4.1.3, so please update your version and let me know 😉

    Have a great day!

    Thread Starter darondaron

    (@darondaron)

    5 years, 5 months ago

    @leap13

    Hi!

    I have updated to v4.1.3, but does not work. The arrows and dots are not visible when using local Font Awesome SVG. But if I click where the Arrows/Dots should be, the Carousel moves correctly based on the click. So they are just not visible.

    I have downloaded to my WP Media Library the very same arrows from Font Awesome (e.g. fas-fa-chevron-right) and the circle dots which was used before by default. I also tried using other SVG I have locally which I use successfully in other places with Elementor (e.g. Facebook Font Awesome SVG).
    I have made sure there is color on. Background colors, borders, hover etc. work, but no icons visible. Elementor Icon Library do work and are visible though, but not the SVGs in Media Library.

    So, trying with these SVG’s and SVG’s I have visible in other widgets in Elementor, I can not understand why they are not visible here.
    I can not see how this should be done in any other way.
    This is the first time in any application/widget that a local SVG would not be visible for me.
    What do you think?

    Best regards
    daron

    • This reply was modified 5 years, 5 months ago by darondaron.
    • This reply was modified 5 years, 5 months ago by darondaron.
    Thread Starter darondaron

    (@darondaron)

    5 years, 5 months ago

    @leap13

    Just adding info, when in web-browser: Right-click + Inspect on the invisible icon, I do not see the correct class it should get, like “fas fa-chevron-..” so it seems like the SVG never gets loaded correctly.

    Plugin Author Leap13

    (@leap13)

    5 years, 5 months ago

    Hi @darondaron

    Hope you’re doing well today 🙂

    I’m not sure if I’m missing something, but I have checked your page and I can see the SVG icon on my end. So, am I getting this right?

    Here’s a screenshot from my end.

    Regards

    Thread Starter darondaron

    (@darondaron)

    5 years, 5 months ago

    Hi @leap13

    Strange!

    I can not see that arrow in Elementor (using Chrome), I can not see it outside Elementor in Chrome.
    I can not see it on any iPhone or an iPad at home.
    But I now tried using Firefox, and there it showed like you had!

    So, how come it only shows in Firefox? ( I bet you use Firefox! 🙂 )
    I have of course cleared all caches when I try this.
    I would need this to work in Chrome.
    What do you think?

    Best regards
    Daniel

    Thread Starter darondaron

    (@darondaron)

    5 years, 5 months ago

    @leap13

    Also, the arrow you see is black, not white as the other, so something is wrong also in Firefox, since it’s one color for both arrows.

    Can you please specify, besides have the actual .svg file in the media library, what other “things” do I need? I have tried in the CSS to use “@import url(“../wp-content/themes/oceanwp-child/fonts/fontawesome.css”)”
    but did not change anything.
    Other than the actual FA .svg file, what other files or references are needed for this to work?

    Best regards
    Daniel

    • This reply was modified 5 years, 5 months ago by darondaron.
    Plugin Author Leap13

    (@leap13)

    5 years, 5 months ago

    Hi @darondaron

    I was able to reproduce the issue on my end, so I have addressed this to our devs team and will be included in the next release of the plugin.

    It would be great if you could help us by sending us a message on our website so the team can add the changes into your version so you can confirm if the issue has been resolved.

    Regards

    Thread Starter darondaron

    (@darondaron)

    5 years, 5 months ago

    @leap13

    Great to hear! hope is high 🙂
    I have sent a message about this on your website.
    BR
    darondaron

    Plugin Author Leap13

    (@leap13)

    5 years, 5 months ago

    Hi @darondaron

    We can confirm that all issues has been fixed in v4.1.5 🙂

    Have a great day!

    Abanob

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Use own local SVG for Carousel arrows’ is closed to new replies.

Tags