Why do my menu icons look like this?? How can I fix it? Code is below with image.
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.
Change to fa-light
to fa-solid
since that one appears to be free to use: Bars Classic Solid Icon | Font Awesome
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:
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.
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?