Я могу изменить fontcolor, но не "fill". Сначала я попытался установить фоновый цвет, но это заполняет всю область области значков.
Например, у меня есть
<i class="icon-star-empty icon-large"></i>
но я хочу, чтобы он был желтым.
Изменить: Вариант использования заключается в том, что я хочу, чтобы "любимый" значок был очерчен серым, по щелчку, контур становится оранжевым, заполняется до желтого.
Шрифт-awesome поставляется с несколькими обрисованными и заполненными icons. star является одним из них.
Существует четыре разных класса звездных значков, которые вы можете использовать:
class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"
Если вы человек наполовину полный пол, вы также можете использовать псевдоним для "icon-star-half-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, которые вы можете посмотреть здесь.
Также можно использовать css-transitions, который предоставляет возможность анимировать изменения свойств CSS вместо того, чтобы изменения вступали в силу мгновенно и/или в сочетании с javascript.
Вам нужно всего лишь установить color: yellow. Поскольку значки являются шрифтом, они будут использовать любой цвет, который вы установили бы для любого другого шрифта (текста) таким же образом.
если вы хотите заполнить всю звезду желтым, попробуйте значок-звезду вместо значка-звезды-пустого
вы можете попробовать это
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
чтобы добавить штрих (контур) к самому шрифту. Надеюсь, это то, что вы ищете.
и для его заполнения просто используйте обычный
color: yellow;
Проблема с "-webkit-text-stroke" заключается в том, что она не полностью поддерживается 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
Спасибо.
Если вы пришли сюда так, как я хотел, чтобы у значка был отдельный цвет "заливки" для значка, чем цвет шрифта (например, "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 предполагая, что по умолчанию он черный. Больше информации здесь.
Продолжая вышеприведенные ответы, иногда вы хотите добавить штрих/рамку к шрифту/значку. В этом случае представлено следующее.
По крайней мере, в WebKit. Пример:
h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
Или стенография:
h1 {
-webkit-text-stroke: 1px black;
}
Штрих работает в WebKit, но исчезает в других браузерах! Альтернатива? Мы можем использовать свойство text-shadow и имитировать обводку.
h1 {
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
Мы используем четыре тени, каждое смещение в 1 пиксель черного цвета без спреда, по одному на верхний правый, верхний левый, нижний левый и нижний правый.
Единственным препятствием будет IE9 и ниже, что, конечно, вы можете использовать специфический для IE CSS для учета.
PS Для справки.
Источник: Ссылка
если вы используете, reactjs и под компонентами
<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>