Question

我想用图片填充字体真棒图标。我知道可以使用webkit使用图像填充文本，但它不能使用来自font-awesome或其他图标字体的图标。这甚至可能吗？我添加了一个代码片段用于演示。

.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>

Answer 1

是的，它可以像任何字体一样工作，但你需要将你的样式应用到:before元素，因为Fontawesome和其他图标字体在这里绘制它们的内容。

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

用图像填充字体真棒图标

1 个答案: