CODEWITHSUNDEEP
htmlcssfont-awesome
NothingButTyler backup
NothingButTyler backup

Reputation: 9

How to make Font Awesome icons smaller?

I'm using a Font Awesome icon to make it so that it is red when you hover.

Except, the icon isn't smaller when I use that code. Did I do something wrong?

Here's the code:

<style> 
.youtube-icon { 
color: black; /* Initial color */ 
font-size: 30px; /* Icon size */ 
transition: color 0.3s; /* Smooth transition */ 
line-height: 1; /* Ensures icon doesn't have extra space */
 }
 .youtube-icon:hover { 
color: red; /* Color on hover */
 }
</style> 
<i class="fab fa-youtube youtube-icon"></i>

Upvotes: 0

Views: 79

Answers (1)

Hao Wu
Hao Wu

Reputation: 20867

It is probably because of the selector has the same or lower specificity than its default one which contains another font-size assignment, which causes yours got overwritten. Try adding the same class selector again to increase its specificity:

.youtube-icon.youtube-icon {
  color: black;
  font-size: 30px;
  transition: color 0.3s;
  line-height: 1;
}

Or use !important if it still didn't change:

.youtube-icon {
  color: black;
  font-size: 30px !important;
  transition: color 0.3s;
  line-height: 1;
}

Upvotes: 0

Related Questions