• Resolved JapeNZ

    (@japenz)


    Hi there,
    Is it possible to use fontawesome for slide arrows?
    I currently run your slider and a second one for products that uses fontawesome icons.
    Ideally I’d make the next / prev arrows match with the other slider if possible.

    Thank you for your help!

    JP

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Arreane

    (@yanex)

    Yes, it is possible by adding the font awesome icon through CSS

    Thread Starter JapeNZ

    (@japenz)

    Hi @yanex,
    Thank you for getting back to me šŸ™‚

    Any chance of an example please?

    Appreciate the help!

    Kind regards,
    JP

    Plugin Support Arreane

    (@yanex)

    Can you provide me a link on your site where MetaSlider is embedded and I’ll try to provide you with the custom CSS code.

    Thread Starter JapeNZ

    (@japenz)

    Hi @yanex,
    That would be amazing, thank you!

    Here’s my website: https://comicbookshop.co.nz/

    The top slider is a product slider that uses the fontawesome arrows I’d like to use with MetaSlider.

    The next slider (Subscriptions / Comic Book Supplies etc), is the MetaSlider slider.
    I managed to use some custom arrows, but can’t work out how to use fontawesome icons instead of a background image.

    Thanks for your help!

    Kind regards,
    JP

    Plugin Support Arreane

    (@yanex)

    Thank you for providing the link. Please use the following CSS code.

    #metaslider-id-53985.metaslider a.flex-prev,
    #metaslider-id-53985.metaslider a.flex-next {
        width: 20px !important;
        height: 48px !important;
        background: none !important
    }
    #metaslider-id-53985.metaslider a.flex-prev:before,
    #metaslider-id-53985.metaslider a.flex-next:after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: block;
        font-size: 30px;
        text-indent: 0;
        color: #fff;
    }
    #metaslider-id-53985.metaslider a.flex-prev:before { content: '\f053'; }
    #metaslider-id-53985.metaslider a.flex-next:after { content: '\f054'; }
    Thread Starter JapeNZ

    (@japenz)

    @yanex,
    Amazing, thank you so much!

    Kind regards,
    JP

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