Alj*_*sha 1 css webkit css3 font-awesome
我想用图像填充字体真棒图标.我知道可以使用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>是的,它可能,它像任何字体一样工作,但你需要将你的样式应用到:before元素,因为Fontawesome和其他图标字体在这里绘制他们的内容.
.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>