Можете ли вы относиться к элементу <i>как к любому другому элементу?

Question

Я пытаюсь изменить высоту / ширину строк меню, но не смог добиться успеха, используя элемент <i>, в который он вложен. Использование элемента <i> позволяет изменить цвет, но когда я пытаюсь изменить ширину и высоту, он не работает.

Tried Css:

@media (max-width: 768px) 
{.module>.fa-bars  {width: 
20px !important; height: 
20px! important;}}

@media (max-width: 768px) 
{.fa-bars  {width: 
20px !important; height: 
20px! important;}}

@media (max-width: 768px) 
{.fa-bars  {width: 
20px height: 
20px!}}

@media (max-width: 768px) 
{.fa-bars a {width: 
20px height: 
20px!}}

Html:

<div class="module widget- 
handle mobile-toggle right 
visible-sm visible-xs"><i 
class="fa fa-bars"></i>

Answer 1

Элемент <i> аналогичен элементу <span>, в котором он является встроенным элементом. В то время как что-то вроде <div>, например, является элементом типа block .

Вы не можете изменять ширину и высоту inline элементов, но вы можете изменить их отображение с помощью display:block (или inline-block, если это соответствует вашим потребностям), чтобы перезаписать значение по умолчанию display:inline. Затем вы можете обращаться с ним так же, как с <div>

Answer 2

Добавить Css -

@media (max-width: 768px) {
.module i {
    font-size: 30px;
}

}

Answer 3

FontAwesome Иконки находятся внутри шрифта. Так что есть два пути.

1. Вы можете установить их размер с помощью font-size.
2. Font Awesome включает набор классов для увеличения значков относительно их контейнера. fa-lg (увеличение на 33%) или fa-2x, fa-3x, fa-4x или fa-5x