Go to the documentation Back to the demo

Elegant Scroll to Top - Back to top JavaScript plugin example – Icon Type: Custom

You can check out the code below to set the parameters.
Icon Type: Custom
Example code
<link rel="stylesheet" href="http://your-domain.com/elegant-scroll-to-top/css/elegant-scroll-to-top.min.css">
<script src="http://your-domain.com/elegant-scroll-to-top/js/elegant-scroll-to-top.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var elegantScrollToTop = new ElegantScrollToTop({        
        iconType: 'custom',
        iconCustomElement: '<span class="elegant-scroll-to-top__icon my-custom-icon-1">⇡</span>',
        iconSize: '2em',
        iconColor: '#ffc107',
        iconColorHover: '#ffd24d',
        iconColorFocus: '#ffd24d',
        iconColorActive: '#fff'
    });
    elegantScrollToTop.init();
});
</script>
Related options
Peoprty Possible Values Default Value Description
iconType e.g. 'icon1', 'icon2', 'icon3', 'icon4', 'custom' 'icon1' The type of the icon. With setting the 'custom' value, you can add your own element. If your website uses a third-party font-based library, such as Font Awesome, you can also use it.
With the other values (e.g. icon1, icon2, etc.), you can choose from predefined icons.
iconCustomElement e.g. '<i class="elegant-scroll-to-top__icon fas fa-arrow-up"></i>', '<svg class="elegant-scroll-to-top__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">...</svg>', etc. null A custom element you want to use instead of a predefined icon. To achieve this, set the value of iconType to 'custom'. If you want the options of the icon (e.g. iconSize, iconColor) to be applied, it is important to add the "elegant-scroll-to-top__icon" class to your custom element. For example ''
iconSize e.g. '16px', '1em', '2em', etc. '16px' The size of the icon. If you use a predefined icon (e.g. icon1, icon2, etc.), the iconSize parameter applies as width and height CSS properties. If you use the iconType parameter width 'custom' value, the size applies as a font-size CSS property.
iconColor e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
iconColorHover e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon in hover state. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
iconColorFocus e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon in focus state. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
iconColorActive e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon in active state. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.