-1

Sorry if you didnt understand the title properly. I have a font awesome icon, which links my social media. I want each icon to have a different color, ive managed to do change the color for all of them, but thats not the case.

This is the icon: <i class="fab fa-twitch fa-2x" aria-hidden="true"></i> I was wondering how to have 2 classes, like <i class="purple" class="fab fa-twitch fa-2x" aria-hidden="true"></i> Any idea on how to do this?

Also, my css is:

.purple { color: purple;

ae milk
  • 25
  • 3

4 Answers4

4

Yes. just separate them with a space. like this: class="fab fa-twitch fa-2x purple".
And BTW fab fa-twitch fa-2x are 3 different classes (fab,fa-twitch and fa-2x).

ATP
  • 2,939
  • 4
  • 13
  • 34
3

You just need only 1 class attribute (you can't have more). Put all classes you need inside

<i class="fab fa-twitch fa-2x purple" aria-hidden="true"></i>
Thomas
  • 88
  • 7
3

You can put the purple class inside the class= with the other classes:

<i class="fab fa-twitch fa-2x purple" aria-hidden="true"></i>
Matheus Delazeri
  • 425
  • 2
  • 15
3

You can have a multitude of classes in the class attribute, it only needs and should only be called once, you simply put a space between the classes within the class attribute. Your CSS looks good.

See the following link for more info on HTML related class attribute: HTML Class Attribute

<i class="purple fab fa-twitch fa-2x" aria-hidden="true"></i>
dale landry
  • 7,831
  • 2
  • 16
  • 28