Используйте FontAwesome или Glyphicons с css: before

есть ли способ встроить HTML в css content: элемент при использовании :before псевдо-элемент?

Я хочу использовать шрифт Awesome( или Glyphicon) в таком случае:

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

здесь X что-то вроде <i class="icon-cut"></i>.

Я могу, конечно, сделать это вручную в HTML, но я действительно хочу использовать :before в этом случае.

точно так же, есть ли способ использовать <i> как список пули? Это работает, но не ведет себя правильно многострочные элементы пули:

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>
7 72
css twitter-bootstrap font-awesome

7 ответов:

то, что вы описываете, на самом деле то, что уже делает FontAwesome. Они применяют семейство шрифтов FontAwesome к ::before псевдо элемент любого элемента, который имеет класс, который начинается с " icon -".

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

тогда они используют псевдо элемент ::before, чтобы поместить значок в элементе с классом. Я просто пошел в http://fortawesome.github.com/Font-Awesome/ и проверил код, чтобы найти это:

.icon-cut:before {
  content: "\f0c4";
}

так что если вы хотите добавить значок снова, вы можете использовать ::after элемент для достижения этой цели. Или для вашей второй части вашего вопроса, Вы могли бы использовать ::after псевдо элемент, чтобы вставить символ маркера, чтобы выглядеть как элемент списка. Затем используйте абсолютное позиционирование, чтобы поместить его влево или что-то подобное.

i:after{ content: '22';}
148

@keithwyland ответ отличный. Вот SCSS mixin:

@mixin font-awesome($content){
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: $content;
}

использование:

@include font-awesome("\f054");
2

в случае элементов списка есть немного CSS вы можете использовать для достижения желаемого эффекта.

ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}

Я проверил это в Safari на OS X.

0

Это самый простой способ сделать то, что вы пытаетесь сделать:

http://jsfiddle.net/ZEDHT/

<style>
 ul {
   list-style-type: none;
 }
</style>

<ul class="icons">
 <li><i class="fa fa-bomb"></i> Lists</li>
 <li><i class="fa fa-bomb"></i> Buttons</li>
 <li><i class="fa fa-bomb"></i> Button groups</li>
 <li><i class="fa fa-bomb"></i> Navigation</li>
 <li><i class="fa fa-bomb"></i> Prepended form inputs</li>
</ul>
0

этого подхода следует избегать. Значение по умолчанию для vertical-align и baseline. Изменение семейства шрифтов только псевдо-элемента приведет к появлению элементов с разными шрифтами. Разные шрифты могут иметь разные метрики шрифтов и разные базовые линии. Чтобы выровнять различные базовые линии, общая высота элемента должна была бы увеличиться. посмотреть этот эффект в действии.

это всегда лучше иметь один элемент на значок шрифта.

0

Re: использование значка в :before – последние шрифты удивительные сборки включают в себя .fa-icon() mixin для SASS и меньше. Это будет автоматически включать в себя font-family а также некоторые настройки рендеринга (например -webkit-font-smoothing). Таким образом вы можете сделать, например:

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}
-1
<ul class="icons-ul">
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
</ul>

все значки Font awesome поставляются по умолчанию с Bootstrap.

-14