Текстовый градиент с шрифтом awesome

Я только что открыл шрифт, и я хочу использовать его на своем веб-сайте.

Проблема в том, что я хочу, чтобы мой шрифт был окрашен градиентом. Я нашел этот код, который работает на стандартном тексте, но я не могу заставить его работать с иконкой из шрифта Awesome

Вот что я тестировал:

<style>
    .big-icon {
        font-size: 72px;
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>

<span class="big-icon">
    Hello world
</span>
<i class="icon-beaker"></i>
<span class="big-icon">
    <i class="icon-beaker"></i>
</span>

И он отобразил "Hello world" с градиентом, иконку, которую я хочу, а затем ничего...

У кого-нибудь есть идея?

благодаря

Ответы

Ответ 1

Сделал это быстрым выстрелом; важно понять, что Font Awesome добавляет фактические значки через псевдоэлемент "before":

[class^="icon-"]::before,
[class*=" icon-"]::before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

.icon-beaker:before {
  content: "\f0c3";
}

Чтобы применить эффект градиента к значку, вы должны настроить таргетинг на псевдоэлемент, который содержит значок - см. Этот jsFiddle для рабочей демонстрации на основе вашего кода:

.big-icon:before {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial; /* reset Font Awesome display:inline-block */
}​

Изменить: связанный выше jsFiddle не работает должным образом, потому что связанный CSS файл, содержащий "FontAwesome" -icons, перемещен; рабочая версия с использованием bootstrapcdn.com организовали версию FontAwesome v4.0.3 и обновленные имена классов CSS FontAwesome-иконка доступна на http://jsfiddle.net/HGxMu/55/

Ответ 2

Примените стили непосредственно к значку.

.fa-gradient {
	background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; return false;" rel="stylesheet"/>
<i class="fa fa-3x fa-wrench fa-gradient"></i>