Как установить значок изображения и редактируемый цвет с помощью CSS

Question

Я хочу использовать значок в моей навигационной панели для Интернета. Как изменить размер значка изображения с помощью CSS? Как изменить цвет значка на основе заголовка?

Вот HTML код:

<ul> 
    <li><a class="icon icon-home" href="#">Home</a></li> 
    <li><a class="icon icon-favorit" href="#">Favorit</a></li> 
    <li><a class="icon icon-news" href="#">News</a></li> 
    <li><a class="icon icon-events" href="#">Events</a></li> 
    <li><a class="icon icon-about" href="#">About us</a></li> 
    <li><a class="icon icon-contact" href="#">Contact</a></li> 
</ul> 

Вот один из моих правил CSS, остальные такие же.

.icon-home { 
    content:url(../images/food.png); 
} 

Answer 1

, чтобы изменить размер содержимого вы можете использовать:

.icon-home{ 
content: ""; 
background: url(../images/food.png) no-repeat 0 0;; 
height:10px;/*whatever you want*/ 
width:10px;/*whatever you want*/ 
background-size:100% 
} 

Answer 2

Чтобы изменить цвет значка вы можете использовать CSS filter свойства. Он обеспечивает доступ к некоторым эффектам, таким как изменение цвета, яркость и размытие.

Просмотрите демо-страницу CSS Filter Effects, чтобы увидеть функциональность вместе с примерами css.

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

.icon-home 
{ 
    filter: grayscale(100%); 
    -moz-filter: grayscale(100%); //firefox 
    -webkit-filter: grayscale(100%); //chrome 
} 

Вы также можете применить несколько функций, как то

.icon-home 
{ 
    -webkit-filter: contrast(3) grayscale(0.2) sepia(0.6); 
}