Можно ли окрасить цветные цвета значков?

Ответ 1

Шрифт-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.

Ответ 2

Вам нужно всего лишь установить color: yellow. Поскольку значки являются шрифтом, они будут использовать любой цвет, который вы установили бы для любого другого шрифта (текста) таким же образом.

если вы хотите заполнить всю звезду желтым, попробуйте значок-звезду вместо значка-звезды-пустого

вы можете попробовать это

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;

чтобы добавить штрих (контур) к самому шрифту. Надеюсь, это то, что вы ищете.

и для его заполнения просто используйте обычный

color: yellow;

Ответ 3

Проблема с "-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

Спасибо.

Ответ 4

Если вы пришли сюда так, как я хотел, чтобы у значка был отдельный цвет "заливки" для значка, чем цвет шрифта (например, "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 предполагая, что по умолчанию он черный. Больше информации здесь.

Ответ 5

Продолжая вышеприведенные ответы, иногда вы хотите добавить штрих/рамку к шрифту/значку. В этом случае представлено следующее.

По крайней мере, в 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 Для справки.

Источник: Ссылка

Ответ 6

если вы используете, reactjs и под компонентами

<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>