Изменение цвета значка из FontAwesome?

Question

Я использую BigCommerce, и есть это для моего кода:

.icon-cart { 
    color: #4ca3c0 !important; 
} 

.icon-cart a{ 
    color: #4ca3c0 !important; 
} 

и это не изменит цвет значка. Любая помощь?

http://glymed-plus.mybigcommerce.com/

Answer 1

Установка fontAwesome перепутались.

Причина color атрибут CSS не изменит цвет корзины потому, что корзина визуализируется с помощью спрайта:

.icon { 
    display: inline-block; 
    width: 16px; 
    height: 14px; 
    background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px; 
} 

(background загружается изображение, а значок).

См http://fortawesome.github.io/Font-Awesome/get-started/

Вы не могли бы копировали другие папки в установке.

Если вы удалите background, установите другие каталоги и сохраните свой HTML-код, он должен работать.

---

EDIT: Вы были прав, fontAwesome правильно установлен.

Теперь измените <i> элемент:

<i class="fa fa-shopping-cart" title="View Cart">&nbsp;</i> 

Вы можете установить размер и положение, чтобы лучше дисплей, но fa и fa-shopping-cart классов должны быть установлены для отображения значка корзины покупок.

Answer 2

Первая Удалить !important

.icon-cart { 
    color: #4ca3c0; 
} 

.icon-cart a{ 
    color: #4ca3c0; 
} 

теперь вот как разметка выглядит

<a href="" title="View Cart"> 
    <i class="icon icon-cart" title="View Cart">&nbsp;</i> 
    <span></span> 
</a> 

.icon-cart является i и не имеет детей.

Так что это не действует:

.icon-cart a{ 
    color: #4ca3c0; 
} 

Answer 3

Ваш значок не создан css, это изображение png, которое загружается как фон значка.

вы не можете просто «изменить» его цвет, вам нужно настроить его с помощью CSS Filters

в вашем случае, вы можете применить инвертировать на <i> элемент:

-webkit-filter: invert(100%); 

изменить его от серого до белый.

body { 
 
    background: black; 
 
} 
 
.icon { 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 14px; 
 
    background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px; 
 
    -webkit-filter: invert(100%); 
 
} 
 
.icon:hover { 
 
    -webkit-filter: invert(0%); 
 
}

<i class="icon icon-cart" title="View Cart" style=" 
 
    color: red; 
 
">&nbsp;</i>