Using font awsome icons with css modules

Question

I want to use a font awsome icon together with css modules. Since they have "static selectors", I'm not sure how to accomplish this. F.e:

<i
  className={styles.icon} 
>
Hi
</i>

Now i want to add the icon with "fas fa-search fa-2x". How can I accomplish this?

why not just use <i calssName="fas fa-search fa-2x">Hi</i>. What's the issue in using that — Zohaib Ijaz
– Zohaib Ijaz, Commented Apr 15, 2020 at 8:30
Well, for the rest of my codebase I'm using css modules and in the exact case, there is a lot of styling to the <i> </i> tag so I have to give them a class. Otherwise these styles would apply globally which is not what I want. — David Haase
– David Haase, Commented Apr 15, 2020 at 8:32

Zohaib Ijaz · Accepted Answer · 2020-04-15 08:34:43Z

4

You can combine css-modules based classes and fontawesome classes

<i calssName={`${styles.icon} fas fa-search fa-2x`}>Hi</i>

where styles.icon is custom styling for this icon

answered Apr 15, 2020 at 8:34

Zohaib Ijaz

23k7 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Do you want a different approach?