Fill in transparency of Font-awesome icon

Question

Is it possible to change the colour of the transparent parts of the font-awesome icons I am using?

Currently my page looks like this, however I would like it to look Like this (I used red for clarity's sake)

I read something about gradients but this would extend too far out and would show outside the transparant space

please show us your code.. what version of fw? – לבני מלכה Mar 10 '19 at 13:17 — לבני מלכה, Mar 10 '19 at 13:17
@Tyadan, does my answer work for you? – Abhishek Raj Mar 10 '19 at 14:48 — Abhishek Raj, Mar 10 '19 at 14:48

score 0 · Answer 1 · answered Mar 10 '19 at 13:26

You can change the color by using color property but the icons that are in images can't be changed by this property. But if you use these icons <i class="fas fa-envelope"></i>, <i class="fab fa-linkedin-in"></i> instead of that are in image then you can change the color by using color property

score -1 · Answer 2 · edited Mar 10 '19 at 13:37

use the below code:

HTML & CSS code

.linkedin-icon{
                color: red;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
    crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <span class="fa-stack">
        <i class="linkedin-icon fab fa-linkedin fa-stack-2x"></i>        
    </span>
</body>
</html>

Fill in transparency of Font-awesome icon

2 Answers2