Изменить размер изображения содержимого

У меня есть неупорядоченный список ссылок, и каждая ссылка имеет уникальный идентификатор.
Я использую этот идентификатор с селектором :before для размещения связанный веб-сайт значка перед ссылкой (с использованием свойства содержимого).
Один из этих значков в два раза больше остальных.
Есть ли способ изменить размер этого значка с помощью CSS?
Если ответ отрицательный, есть ли способ сделать это, кроме редактирования изображения?

Визуальная ссылка:

Вот что я пробовал (и, похоже, не работает):

#geog:before
{
    content: url("icons/geogebra.ico") " ";
    height: 50%;
    width: 50%;
}

Ответ 1

Раньше я сталкивался с той же проблемой. Попробуйте следующее:

#geog:before
{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url("icons/geogebra.ico") no-repeat 0 0;
    background-size: 100%;
}

Я уверен, что вам придется изменить эти ценности, но это сработало для меня. Конечно, это не сработает, если по какой-то причине вы не можете установить его как фоновое изображение. Удачи вам!

Ответ 2

Я считаю, что вы ищете свойство zoom. Проверьте этот jsfiddle

Также вы можете добавить интервал с margin-right между значком и содержимым элемента.

Ответ 3

Используйте PX вместо%

#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 5px;
width: 5px;
}

Попробуйте: -)