Иконки CSS: невозможно удалить верхнее и нижнее отступы (отличный шрифт)

Вот моя скрипка:

http://jsfiddle.net/schmudde/VeA6B/

Я не могу удалить верхнее и нижнее отступы по обе стороны от значка шрифта awesome:

span {
    border: 1px solid red;
    line-height: 40%;
}
i {
    border: 1px solid green;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    width: auto;
    height: auto;
    line-height: inherit;
    vertical-align: baseline;
    background-color: red;
}

<span><i class="icon-check icon-3x"></i></span>

Я попытался определить высоту строки и унаследовать ее. Здесь есть кое-что принципиальное, чего я явно не понимаю.


html css font-awesome-3.2
person Schmudde    schedule 17.04.2014    source источник

Ответы (3)


arrow_upward
8
arrow_downward

line-height в диапазоне вам не очень поможет, поскольку значок добавлен к псевдоклассу :before в тег <i />. Этот псевдокласс создаст несколько скрытый элемент, если его можно так назвать.

Итак, если вы хотите переопределить css:

.icon-check:before { font-size: 2rem; }

Удаление заполнения значка может быть непростым делом. Возможно, если вы установите span на display: inline-block, вы сможете использовать height, width в сочетании с overflow: hidden.

span {
    border: 1px solid #FF0000;
    display: inline-block;
    height: 38px;
    overflow: hidden;
    position: relative;
    width: 45px;
}
i.icon-check:before {
    left: 0;
    position: absolute;
    top: -4px;
}

ДЕМО

person Tim Vermaelen    schedule 17.04.2014
comment
Блестяще. Я не мог найти много сообщений по этой конкретной проблеме, и это сводило меня с ума. Я очень ценю это! - person Schmudde; 17.04.2014

arrow_upward
7
arrow_downward

Используйте span { line-height: 100%; }, чтобы он заполнил блок.

person punund    schedule 17.04.2014

arrow_upward
0
arrow_downward

Вы устанавливаете границы в span, а линии, наследующие высоту строк в i, вот в чем проблема.

просто добавьте границы к i:

span {
   line-height: 40%;
     }
i {
   border: 1px solid red;
   border: 1px solid green;
   padding: 0px;
   margin: 0px;
   display: inline-block;
   width: auto;
   height: auto;
   line-height: inherit;
   vertical-align: baseline;
   background-color: red;
   }

   <span><i class="icon-check icon-3x"></i></span>

Fiddle

person Milad Abooali    schedule 17.04.2014