How to style classes initiated with . fa-?

Asked

Viewed 78 times

4

I’m using the Fontawesome in the React and to change the color of an icon you need to change the color in the icon class. See an example below:

.fa-drash{
    color: #ff0000;
}

The bottom follows the way it is today, but every time I include a new icon in the application, I have to update the style sheet.

.fa-drash, fa-ed, .fa-adjust, .fa-acorn, .fa-alarm, .fa-amazon, .fa-apple, .fa-appter{
    color: #ff0000;
}

My thought would be to improve this by inserting only the initials of the class .fa-, as for example below, but it did not work with me:

.fa-*{
     color: #ff0000;
}

It is possible to style classes started with .fa-? Yes yes, as?

css

  • I do not recommend styling directly the "fa" class. I would advise you to create a class of your own, for example "my-icon" and style it with your "default" settings. To the extent necessary, you just assign this new class to the icons you want to inherit these properties.

3 answers

4


I agree with @Anderson, but there is a way to get all classes that start or have inside with a given name or character as for example the "fa-"...

Briefly you will make the selection by attribute class using the operator * before the =, so every class that has inside the name any string that contains "fa-" will be selected.

[attr*=value] Represents an element with a name attribute attr which value contains at least one occurrence of value contained in the string.

Source with full list of operators ~ | ^ $ * and how each of it works: https://developer.mozilla.org/en-US/docs/Web/CSS/Seletor_de_atributos

[class*="fa-"] {
    color:red;
    font-size:30px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div>
  <i class="fab fa-stack-overflow"></i>
</div>

<p>
  <i class="fab fa-angellist"></i>
</p>

TIP:

That [href*="html"] is different from that [href*="HTML"]

The CSS is case sensitive and to avoid problems with Camelcase or Caixa Alta you place the letter at the end of the selector i

[attr operator value i]

Adds a i (or I) before the keys are closed {}, makes the value be compared without taking into account high box or low box(for characters within the ASCII range).

Here in this question you have some details on the subject: How to make CSS ignore whether the attribute is uppercase or lowercase?

  • Good answer Hugo. Vlw.

  • @Viana No problem, my dear. This technique is for qq attribute, you can take for example all Ids that have some word, or all elements that have a [data-text] and so on! []s

2

Wouldn’t it be but handy if you create a secudaria class with the color you want? so you can do reuse without having to redo the css of the fontawesome.

.fa-vermelho{
    color: #ff0000;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<i class="fas fa-igloo fa-vermelho"></i>

1

But why do you need to change the font color directly on the icon? Just change it in the context the icon is in.

body {
  font-size: 5rem;
}

div {
  color: green;
}

p {
  color: red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div>
  <i class="fab fa-stack-overflow"></i>
</div>

<p>
  <i class="fab fa-stack-overflow"></i>
</p>

  • Thanks Anderson for the suggestion and answer, but does not answer the question exactly. But I think I could improve by actually responding to what I asked and leaving your answer as an increment. I didn’t find in style sheet documentations if that’s possible.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.