How To Style Font Awesome Icons

You're here to learn how to style font awesome, so I assume you already what it is. but just in case if you don't know, you can check this out.

If you hate reading the whole article to learn about this article's point, let me just save you the headache : You cannot apply transforms to inline elements. To solve the problem just apply display: inline-block;
If you wanna dig deeper, then stay with me.

Styling font awesome isn't really that different from styling normal fonts.

<i class="fab fa-twitter"></i>

i {
    font-size: 100px;
    color: #000;
    transform: rotate(20deg);
    position: absolute;
    top: 40%;
    left: 40%;
}

See? it wasn't hard at all. BUT lets's just say you wanna add an icon to your link, then styling font awesome could be a little tricky.

When you try to style it the way you style a simple icon , some css properties won't work :

<a href="#">
        <i class="fab fa-github"></i>
    </a>

a {
    margin: 250px;
    font-size: 55px;
    color: black;
    transform: rotate(20deg) scale(1);
    transition: 0.5s;
}

a:hover {
    transition: 0.5s;
    transform: rotate(360deg) scale(1.5);
}

When you hover on the icon,it should rotate 360 degree, right?

But as you see margin and transform haven't been applied to it.
You cannot apply transforms to inline elements like this. To solve the problem just apply display: inline-block; and voila

a {
    margin: 250px;
    font-size: 55px;
    color: black;
    transform: rotate(0deg) scale(1);
    transition: 0.5s;

    /* inline-block is the trick  */
    display: inline-block;
}

a:hover {
    transition: 0.5s;
    transform: rotate(360deg) scale(1.5);
}

So don't forget about display: inline-block; .

---

Bonus

Gradient Text/FontAwesome Icon

i {
background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Here's a pen I've found

---

And that's it for today's article. I hope you enjoyed it.

You connect with me on twitter. 😊👇