Fullpage.js - Change Dotted Nav to Icon Set

Question

I would like to change fullpage.js dotted nav to an icon set. Each icon will represent each section. How can I manage to do that? Cannot find any solution of this.

Please advise.

Thanks.

Answer 1

What about creating your own navigation bar?

Use navigation:false.

Then create you own nav and use apply the method fullpage_api.moveTo in each of the elements.

Reproduction online

new fullpage('#fullpage', {
    licenseKey: 'YOUR KEY HERE',
    navigation: false,
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        activateNavItem($('#my-nav').find('li').eq(destination.index));
    },
    afterRender: function(){
        activateNavItem($('#my-nav').find('li').eq($('.section.active').index()))
    }
});

$('.fa-bell').click(function(){
    var destination = $(this).closest('li');
    fullpage_api.moveTo(destination.index() + 1 );
});

function activateNavItem(item){
    item.addClass('active').siblings().removeClass('active');
}

With my list using font-awesome icons:

<ul id="my-nav">
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
</ul>