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

76

Можно ли встраивать 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>
  • 2
    Поскольку :before является псевдоэлементом, вы не можете иметь html контент, только text .
  • 0
    Привет Тиг, просто проверяю, был ли мой ответ достаточным. Надеюсь, это помогло. Спасибо!
Показать ещё 1 комментарий
Теги:
font-awesome

7 ответов

145
Лучший ответ

То, что вы описываете, на самом деле является тем, что делает 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: '\2022';}
Поделиться
  • 1
    Потрясающее наблюдение !!!
  • 15
    Здесь вы можете найти все коды содержимого значков "\xxxx"; : astronautweb.co/snippet/font-awesome
Показать ещё 3 комментария
3

@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");
Поделиться
0

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

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

Поделиться
0

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

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}
Поделиться
  • 0
    Просто краткое напоминание о том, что шрифт awesome также предоставляет переменные для использования в качестве контента, так что можно также использовать: .pseudo-class: before {@include fa-icon (); содержание: $ fa-var-phone-square; }
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

В случае ваших элементов списка есть небольшой CSS, который вы можете использовать для достижения желаемого эффекта.

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

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

Поделиться
-14 
<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>

Все значки шрифта awesome отображаются по умолчанию с помощью Bootstrap.

Поделиться
  • 1
    с каких пор? Самозагрузка идет с глификонами, а не с потрясающими.
  • 2
    Это неверно и не используется: раньше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню