Установка размера значка в CSS

Я работаю над JSF, и я использую этот код для отображения окна с ошибкой.

<div class="pnx-msg pnx-msg-warning clearfix">
    <i class="pnx-msg-icon pnx-icon-msg-warning"/>
</div>

Часть <i class.../> импортирует значок предупреждения. Его размер по умолчанию составляет 36 пикселей, но мне нужно изменить его размер до 24 пикселей. Как это сделать?

Спасибо!

ОТВЕТЫ

Ответ 1

Вы можете переопределить фреймворк CSS (я думаю, вы его используете) и установить размер по своему желанию, например:

.pnx-msg-icon pnx-icon-msg-warning {
    width: 24px !important;
    height: 24px !important;
}

Свойство!! важно, чтобы ваш код имел приоритет для кода фреймворка. Убедитесь, что вы переопределяете правильное свойство, я не знаю, как работает среда, это просто пример важного использования.

Ответ 2

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

<i class="fa fa-minus-square-o" style="font-size: 0.73em;"></i>

Существует 4 способа указать размеры значка.

px: предоставить фиксированные пиксели на ваш значок

em: по отношению к вашему текущему шрифту. Скажем, текущий шрифт ur равен 12px, тогда 1.5em будет 18px (12px + 6px).

pt: обозначает точки. В основном используется в печатных СМИ

%:. Относится к размеру значка на основе его первоначального размера.

Ответ 3

Лучший способ - использовать "background-size".

.pnx-msg-icon .pnx-icon-msg-warning{
background-image: url("../pics/edit.png");
background-repeat: no-repeat;
background-size: 10px;
width: 10px;
height: 10px;
cursor: pointer;
}

даже если размеры вашего значка больше 10px, оно будет 10px.

Ответ 4

это работает для меня, попробуйте.

height:1rem;
font-size: 3.75em;