'Customize uikit sliders' navigation icons

Instead of uikit default arrow navigation icons(< & >), I need to put my own image or icon. Like bellow image. Is it possible? If so please share.

this is my code

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

<ul class="uk-slideshow-items">
    <li>
        <img src="images/photo.jpg" alt="" uk-cover>
    </li>
    <li>
        <img src="images/dark.jpg" alt="" uk-cover>
    </li>
    <li>
        <img src="images/light.jpg" alt="" uk-cover>
    </li>
</ul>

<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

the icons i need

htmlcssuikit


Solution 1:[1]

You can add your icons to the uikit library in the project, and then rebuild(compile) the UI Kit. Have a look into the documentation of the uikit Custom icons. After that you should be able to use them like other uikit icons.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Code_beginner

Related Questions