Meun icons need help fixing

Why do my menu icons look like this?? How can I fix it? Code is below with image.

Code used

Based on FontAwesome’s website, the light bars is a “pro” icon, so you have to pay the $99/year subscription to get access to it:

To use the light style of “bars“, you’ll need a subscription to a Pro-level plan or a perpetual Pro license that includes the specific version of Font Awesome in which this icon (or style) was released.

Source: Bars Classic Light Icon | Font Awesome

Change to fa-light to fa-solid since that one appears to be free to use: Bars Classic Solid Icon | Font Awesome

It worked for the x icon but not the bar icon

Looks like bars was made available in version 6.2.0 but you are using 6.1.2. I think you need to use a later version to get access to the bars icon.

Maybe look for icons that are free and replace the other icons, if you do not have the pro version, you can search free svg icons, and find some cool looking icons, sadly they aren’t as good as what you would get with the paid version of FontAwesome.

Some great websites are:

SVG Repo and Flat Icon

It worked but how do I make display only when in mobile mode and not on desktop mode

Here’s the css

Did you mean to write “nav .fa”? You wrote “new .fa”

I fixed it but the icons still appear

Are you trying to make the icons not appear? You do not seem to have a selector for the icons themselves. The icons have classes like “fa-solid” not “fa” and the classes are applied to i elements, not nav elements.

Use a media query:

@media and screen (min-width: 768px) {
  .*name of the class* {
     display: none;
  }
}

I used i. fa-solid{
display: none;
}
And my icons disappeared on both desktop mode and mobile mode but I need it to appear on mobile




Then instead of min-width use max width

I get the same result.

You need to change “nav .fa” to “i .fa-solid” in the media query block. Then use min-width if you want those settings only for large displays and max-width if you want those only for mobile.

I did what you said but it just reversed the problem



Sorry you are making this very confusing. What is your intended goal? You said that you need the icons to show up on mobile. That is what it currently does. Do you need them to show up on both desktop and mobile?

So what I mean is like for smaller screens (ex: mobile device) I want the website page to look something like this


But for larger screens (ex: like a computer or smart tv) I want the website to look something like this