Font-Awesome 5

Hi guys,

I’m using metismenu 2.7.1 in sb-admin2 template.

I’m having a lot of problems because i’m using font-awesome 5. Is it possible to update the Metis Menu with font-awesome 5? Would greatly appreciate it.

Thanks for your time!!

[messyhair66]

Someone much smarter than me can probably come up with a more elegant solution, but here’s something… I didn’t want to edit metisMenu directly and updating the CSS for sbadmin had no effect. I added this JS instead to handle the show and collapse events:

            $('ul.nav-second-level').each(function() {
                $(this).on('show.bs.collapse', function() {
                    $(this).siblings('a').children('svg[data-icon=angle-left]').each(function(index, value) {
                        $(value).removeClass('fa-angle-left').addClass('fa-angle-down');
                    });
                }).on('hide.bs.collapse', function() {
                    $(this).siblings('a').children('svg[data-icon=angle-down]').each(function(index, value) {
                        $(value).removeClass('fa-angle-down').addClass('fa-angle-left');
                    });
                });
            });

And this is probably more appropriate in the sbAdmin repo, but this was the only Google result; so, cheers.

[AlexM1dn1ght]

The code above did not work for me because metisMenu uses its own events for showing and hiding the menu and was eating the bootstrap events, at least that is what I understood from my debug session. I ended up using the following code (tested with metisMenu 2.7.7 and FontAwesome 5.0.13 SVG). This should work with any level of menu.

$('#yourMenuSelectorId').metisMenu().on('show.metisMenu', function (e) { $(e.target).siblings('a').children('svg[data-icon=angle-left]').removeClass('fa-angle-left').addClass('fa-angle-down'); }).on('hide.metisMenu', function (e) { $(e.target).siblings('a').children('svg[data-icon=angle-down]').removeClass('fa-angle-down').addClass('fa-angle-left'); });