Font-Awesome 5

[dgmarques]

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!!

[onokumus]

Hi @dgmarques
I'm sorry for the late reply. Using FA-5 with metisMenu should not be a problem. What kind of problem do you have?

[dgmarques]

It must have been a problem with SB-Admin2; it does not use MetisMenus' css classes, instead it has it's own, something about this whole thing was not working, pseudo-elements where not working properly (they would not change from 'angle-down' to 'angle-left' nor the other way around.

What I did to get around this was not use pseudo-elements, but instead use FA-5 normally with SVG elements; for MetisMenu to work like this I edited it's javascript to instead of changing classes, it would find the SVG and change it's data-icon attribute according to the state ('.active` or not).

[messyhair66]

Same issue + using SBAdmin 2. I can get icons in the menu to work without pseudo elements, not with.

[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.

[jamesflynn]

@messyhair66 Can you share explicitly how to implement your solution? Where do you add that code? I'm having the same problem.

[messyhair66]

I added it in the footer after including all of the regular dependencies inside of my document.ready function.

<script type="text/javascript">
           (function($) {
               $('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');
                       });
                   });
               });
           })(jQuery);
       </script>

I also updated the angle down in the menu to be:
<span class="fas fa-angle-left pull-right"></span>

[ItsDanielHarris]

@messyhair66 The script doesn't work with third-level menus.

[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'); });