我想用图像填充字体真棒图标.我知道可以使用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>