Використовуйте FontAwesome або Glyphicons з css: before

Чи є спосіб вбудувати HTML в content:елемент css при використанні:before псевдоелемента?

Я хочу використовувати Font 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>

Те, що ви описуєте, насправді те, що вже робить 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';}

Відповідь @keithwyland чудова. Ось комбінація SCSS:

@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");

У випадку з вашими елементами списку є трохи CSS, який ви можете використовувати для досягнення бажаного ефекту.

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

Я перевірив це в Safari на OS X.

Цього підходу слід уникати. Значення за замовчуванням для vertical-alignце baseline. Зміна сімейства шрифтів лише псевдоелемента призведе до елементів з різними шрифтами. Різні шрифти можуть мати різну метрику шрифту та різні базові лінії. Для того, щоб різні базові лінії вирівнювались, загальна висота елемента повинна була б збільшитися. Побачте цей ефект у дії .

Завжди краще мати по одному елементу на піктограму шрифту.

Загальноприйнятий відповідь (станом на 29 липня 2019 роки) тільки залишається в силі , якщо ви ще не почали використовувати більш свіжий SVG-з-JS підхід FontAwesome. У такому випадку вам потрібно дотримуватися інструкцій, наведених у їхніх псевдоелементах CSS . В основному слід стежити за трьома речами:

• помістіть атрибут data у тег SCRIPT "data-search-pseudo-elements", завантажуючи fontawesome.min.js
• зробити так, щоб сам псевдоелемент мав display: none
• правильна комбінація сімейства шрифтів і ваги шрифту для значка, який вам потрібен: "Шрифт Awesome 5 Free" та 300 (фальшивий / легкий), 400 (дальший / звичайний) або 900 (фас / твердий)

Це найпростіший спосіб зробити те, що ви намагаєтесь зробити:

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>

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

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}

<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>

Усі чудові значки шрифтів за замовчуванням поставляються з Bootstrap.