Я работаю над JSF, и я использую этот код для отображения окна с ошибкой.
<div class="pnx-msg pnx-msg-warning clearfix">
<i class="pnx-msg-icon pnx-icon-msg-warning"/>
</div>
Часть <i class.../> импортирует значок предупреждения. Его размер по умолчанию составляет 36 пикселей, но мне нужно изменить его размер до 24 пикселей. Как это сделать?
Спасибо!
Вы можете переопределить фреймворк CSS (я думаю, вы его используете) и установить размер по своему желанию, например:
.pnx-msg-icon pnx-icon-msg-warning {
width: 24px !important;
height: 24px !important;
}
Свойство!! важно, чтобы ваш код имел приоритет для кода фреймворка. Убедитесь, что вы переопределяете правильное свойство, я не знаю, как работает среда, это просто пример важного использования.
вы можете изменить размер значка с помощью размера шрифта, а не устанавливать высоту и ширину значка. Вот как вы это делаете:
<i class="fa fa-minus-square-o" style="font-size: 0.73em;"></i>
Существует 4 способа указать размеры значка.
px: предоставить фиксированные пиксели на ваш значок
em: по отношению к вашему текущему шрифту. Скажем, текущий шрифт ur равен 12px, тогда 1.5em будет 18px (12px + 6px).
pt: обозначает точки. В основном используется в печатных СМИ
%:. Относится к размеру значка на основе его первоначального размера.
Лучший способ - использовать "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.
это работает для меня, попробуйте.
height:1rem;
font-size: 3.75em;