Question 290292 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS – Font Icons : Class from fontawesome not working when calling it from css file

I’m pretty "new" to HTML/CSS coding so apologies if this topic is trivial.

This concern the use of font icons, more precisely Fontawesome.

  • HTML FILE : In my html document, the icon is embeded that way (within a "menu" class) : <i class="fas fa-user"></i>
  • CSS FILE : So, in order to apply styles to this icon : .menu .fas {width: 2rem;}

But it doesnt work for some reason.

When I inspect the code in my browser, the line from html appear to be not used (grayed out), and instead I have new lines starting with :
<svg class="svg-inline--fa fa-user" ...

So when I change my css code to : .menu .svg-inline--fa{width: 2rem;}
It works.

I would love to have some explanations, thanks ! 🙂

Tags:

4

Answers


  1. 0

    use javascript to call a font in to css

    Login or Signup to reply.
  2. 0

    Go in your Font awesome project and then go to settings. There you can select the technology to use for your font : Web Font (CSS pseudo element) or SVGs.

    SVG is using JS to replace element with SVGs.

    FontAwesome settings page

    Login or Signup to reply.
  3. 0

    Certainly! In Font Awesome versions 5 and above, icons are rendered as SVGs instead of traditional font-based elements. When you use <i class="fas fa-user"></i> in your HTML, it’s actually calling an SVG icon named user.

    However, the CSS rule .menu .fas { width: 2rem; } doesn’t affect the icon because it targets the <i> element with the class fas, which doesn’t apply to the rendered SVG icon.

    Instead, .menu .svg-inline--fa { width: 2rem; } correctly targets the SVG element to apply styling. This change occurred because Font Awesome now uses SVGs by default, offering better customization options.

    Login or Signup to reply.
  4. 0

    This is due to how Font Awesome generates icons.

    When you use <i class="fas fa-user"></i>, FA (Font Awesome) replaces it with an inline SVG element that represents the icon. The element has a class of svg-inline--fa fa-user, which is why your CSS targeting .menu .fas doesn’t work for you.

    For FA, you need to target the element directly, which is why .menu .svg-inline--fa { width: 2rem; } sets the width of the icon to 2rem.

    So in closing, .svg-inline--fa being targeted, applies styles to all FA icons in your project, but if you want to style them differently, you can use the icon specific class, such as .fa-user in your case.

    I recommend you read the Font Awesome Documentation to familiarize yourself with the syntax.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search