CODEWITHSUNDEEP
cssangularfrontendfont-awesome
TheNinthOne
TheNinthOne

Reputation: 11

How do I change the color of a Font Awesome icon when using <fa-icon [icon]="faCoffee"> element

How can I change the color of an Font Awesome icon using only css. This is how my code looks like

<div class="channel-type">
    <fa-icon [icon]="channel.getChannelType"></fa-icon>
</div>

And in my css

.channel-type fa-icon {
font-size: 30px;
line-height:30px;
color:black;

}

.channel-type fa-icon ?Here I need to indicate the specific icon (faFacebook) {
   color:blue;
}

Upvotes: 1

Views: 66

Answers (1)

Manojkumar Muthukumar
Manojkumar Muthukumar

Reputation: 323

You can apply any class / id with <fa-icon> element directly.

<fa-icon class="iconColor" [icon]="channel.getChannelType"></fa-icon>

.iconColor{color:red }

if specific like faFacebook this.

<fa-icon class="icon-faFacebook" [icon]="channel.getChannelType"></fa-icon>

use this with any prefix as a class name icon-faFacebook

.icon-faFacebook{color:blue}

Upvotes: 1

Related Questions