How do I change icon color when using ex_fontawesome?

Questions / Help
,
1

Hi,

I’m using the FontAwsome implementetion from miguel-s/ex_fontawesome.
It renders the icons as expected, but I’m not sure how change the colors of the icons.
I would like to use white icons instead of the default black ones.

The official FontAwsome docs says it’s possible to add colors by using a CSS style tag.

FontAwesome.LiveView.icon does not support a style attribute, as far as I can see.

Any suggestions? :slight_smile:

Cheers,
Martin

2

It does support a class attribute though, so if you’re using something like Tailwind (or have your own classes that change text colours) you could use those instead.

3

You’re right. That works.

 <FontAwesome.LiveView.icon name="address-book" type="regular" class="icon h-4 w-4" />`

The “icon” class is now added to the generated HTML.

I applied this to my CSS, but non it had no impact.

nav .icon {
font-size: 42px;
color: white;
}

I have tried to change font-size and color by the Chrome Development tooling, but that didn’t have any impact either.
Can you see what I’m doing wrong?

4

In general, the color of <svg /> is changed by stroke and fill attributes.

Try something like:

/* with CSS */
stroke: red;
/ * or  */
fill: red;

# with Tailwind
class="stroke-red-100"
# or 
class="fill-red-100"

If you want to use color attribute, before that, you have to set stroke: currentColor or fill: currentColor.