Hide fa icon on menu when a screen size gets below a certain width

Wappler General Need Help
1

HI

I have a menu which now works great and each menu item has a Font awesome fa icon as a prefix to the menu text.

What I want to achieve is when a user is on laptop to hide the fa icon prefix but still show the menu text.

How would I achieve this?

Cheers!

2

<i class="fa fa-check d-none d-md-inline-block"></i>
This shows a hidden icon as of Tablet size

1 Like
3

Hi Ben

Thanks for this.

So how do I hide an icon based on size screen? Can you explain what you have done here?

I added this to the fa icon but didn't change anything.

How do I hide the icons on smaller devices , do I need to hide them first and then specify when to show them or show them and then specify when to hide them?

Thanks!

4

You can either add a bootstrap 4 class for all the icons as Ben suggested, or do this with media queries in your css:

@media (max-width: 1199px) {
    .nav-link > i {
        display: none;
    }
}

just experiment with the width (i put 1199 as an example).

5

Thanks @Teodor this one worked like a dream and is something I recognise.

1 Like