Я могу изменить fontcolor, но не «fill». Сначала я попытался установить фоновый цвет, но это заполняет всю область области значков.Можно ли окрасить цветные цвета значков?
К примеру, у меня есть
<i class="icon-star-empty icon-large"></i>
, но я хочу, чтобы быть желтым.
Редактировать: Вариант использования заключается в том, что я хочу, чтобы «любимый» значок был очерченным серым, по клику, контур становится оранжевым, заполняется до желтого.
Font-устрашающий поставляется с целым рядом как описано и наполнили icons. star является одним из них.
Есть четыре различных классов значок звезды, которые вы можете использовать:
class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"
Если вы стекла наполовину полный тип человека, вы можете также использовать псевдоним «значок-звезды половины -empty ':
class="icon-star-half-full"
вы можете окрасить шрифты удивительной иконки и использовать различные эффекты, чтобы добиться того, что вы ищете:
<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>
Где используется следующий CSS (а не с помощью встроенных стилей):
.icon-a {
color: #888;
}
.icon-b {
color: orange;
}
.icon-c {
color: yellow;
}
.icon-d {
color: yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
Вы также можете заменить/установить размер тоже, если вы не хотите использовать icon-large.
Приведенный выше код выводит следующее:
, но я поставил выше код и еще несколько опций в JSFiddle, которые вы can look at here.
Также можно использовать css-transitions, который предоставляет возможность анимировать изменения свойств CSS вместо того, чтобы изменения вступали в силу мгновенно и в сочетании с javascript.
для включения jsfiddle, ответ твой. спасибо. – jqed
@jqed Добро пожаловать. Рабочий пример (который вы можете обсуждать) в дополнение к описанию часто стоит тысячи слов или несколько блоков кода. – nickhar
Чтобы указать на это, последняя версия с использованием '-webkit-text-stroke-width' будет работать только для Chrome. – Alvaro
Все что вам нужно, это установить color: yellow. Поскольку значки являются шрифтом, они будут принимать любой цвет, который вы установили бы для любого другого шрифта (текста) таким же образом.
, если вы хотите, чтобы заполнить всю звезду как желтый, попробуйте значок-звезду вместо значка Звездность пустой
вы можете попробовать это
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
добавить обводку (контур) для шрифта сам. Надеюсь, это то, что вы ищете.
и заполнить его просто использовать нормальный
color: yellow;
Проблема с «-webkit-text-stroke» заключается в том, что FF и IE не полностью поддерживаются FF и IE, поэтому в этом случае я должен использовать половину звезды в псевдо-классе внутри нормальной звезды, что-то как это:
.icon-star.red-border {
position: relative;
color: blue;
font-size: 24px;
}
.icon-star.red-border:after {
content: "\f006";
color: red;
position: absolute;
left: 0;
}
И работает для меня, вот fiddle
Спасибо.
, пожалуйста, обновите, не работает для последней версии шрифта awesome, который имеет класс '.fa' – stom
Если вы пришли сюда, как будто я хотел, чтобы у вас был отдельный цвет «заливки» для значка, чем цвет шрифта (например, «F» значка Facebook прозрачен и показывает, какой фон ниже это), вот ваш ответ:
<p class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x fa-2x fa-inverse"></i>
<i class="fa fa-facebook-square fa-stack-2x fa-2x"></i>
</p>
Вы берете обычный округлый квадрат и складываете его под иконкой, которую хотите видеть. Если вы хотите, чтобы он был белым, вы можете указать fa-inverse, если ваш по умолчанию черный. More info here.
Хороший вызов @Brynn! – nickhar
Теперь вы можете сделать это легко с помощью шрифта-awesome 5 и преобразовать. Две звезды сверху друг друга –