将 Font Awesome 与 "background: url" css 结合使用

Question

我有一个梦想！

这个 'star' 是用 Font Awesome 生成的。

star1

我不想用这样的图像替换绿色 :

star2

这是 Fiddle 我尝试过的： http://jsfiddle.net/jmcpeak/M6N24

  background: url(https://paperpackagingplace.com/wp-content/uploads/2016/01/yellow-2.jpg) -100px -40px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

知道我该怎么做吗？

Answer 1

你检查过了吗This Article。

此外，在这种情况下，i 元素的工作方式略有不同。在 i 元素中，文本用于 ::before 元素的 content 定义中。您可以专门使用该定义。您可以使用以下示例，您只需要调整背景定位和大小即可。

.fa-star {
   font-size: 5rem !important;
}

.fa-star::before {
   color: white;
   background: url(https://ktfnews.com/wp-content/uploads/2017/10/World-512x360.jpg) no-repeat left center;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-star"></i>

否则您可以将 FontAwesome 4.7's cheatsheet 中的字符复制为文本，然后制作一个使用 FontAwesome 作为字体的 class。像这样（h1 元素中的方块是从备忘单中复制的图标，它看起来像这样，因为它不是标准字符：

.awesome {
  font-family: "FontAwesome";
  font-size: 10rem;
  color: white;
  text-align: center;
  background: url(https://ktfnews.com/wp-content/uploads/2017/10/World-512x360.jpg) center center no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h1 class="awesome"></h1>

Answer 2

取决于您要更改的图标，您只需要针对特定 class 或所有 i 元素。

.fa-star:before {
  background: url(https://ktfnews.com/wp-content/uploads/2017/10/World-512x360.jpg) -100px -40px no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-star fa-stack-2x"></i>

将 Font Awesome 与 "background: url" css 结合使用

Use Font Awesome with "background: url" css

css

font-awesome