Используйте Font Awesome с "background: url" css - PullRequest
Новая
       5

Используйте Font Awesome с "background: url" css

0 голосов
/ 14 февраля 2020

У меня есть мечта!

Эта 'звезда' генерируется с помощью Font Awesome.

star1

Я не хочу заменять зеленый цвет с изображением, похожим на это:

star2

Это скрипка с тем, что я пробовал: 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;

Знаешь, как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Зависит от того, какую иконку вы хотите изменить, вам просто нужно указать целевой c класс или все 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>
0 голосов
/ 14 февраля 2020

Вы проверили Эта статья .

Кроме того, в этом случае элементы i работают немного по-другому. В элементах i текст используется в определении content для элемента ::before. Вы можете играть именно с этим определением. Вы можете использовать следующий пример, вам просто нужно поиграть с расположением фона и размером. 

.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 в виде текста и просто создать класс, который использует FontAwesome в качестве шрифт Примерно так (квадрат в элементе 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>
...