CODEWITHSUNDEEP
csswebkitfont-awesome
Aljosha
Aljosha

Reputation: 222

fill font awesome icon with image

I want to fill a font-awesome icon with an image. I know that it is possible to fill a text with an image using webkit, but it does not work with an icon from font-awesome or another icon font. Is that even possible? I added a code snippet for demonstration.

.text-image {
 font-size: 4em; 
 font-family: "Arial Black"; 
 background-image: url('https://source.unsplash.com/-BZlnxwe8eQ');
 background-size: 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 -webkit-text-stroke:1px #FAB6D3;
}
<!DOCTYPE html>
<html>
<head>
	<title>Text filled with image</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
<i class="fas fa-user text-image"></i>
<p class="fas fa-star text-image"></p>
<p class="text-image">Test Text</p>
</body>
</html>

Upvotes: 1

Views: 3296

Answers (1)

Bal&#225;zs Varga
Bal&#225;zs Varga

Reputation: 1856

Yes it's possible, it works like any font but you need to apply your styles to the :before element, beacuse Fontawesome and other icon fonts draw their contents here.

.text-image {
 font-family: "Arial Black"; 
}

.text-image, .text-image:before {
 font-size: 4em; 
 background-image: url('https://source.unsplash.com/random');
 background-size: 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 -webkit-text-stroke:1px #FAB6D3;
}
<!DOCTYPE html>
<html>
<head>
	<title>Text filled with image</title>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<i class="fa fa-user text-image"></i>
<i class="fa fa-star text-image"></i>
<p class="text-image">Test Text</p>
</body>
</html>

Upvotes: 6

Related Questions