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

Ответ 1

То, что вы описываете, на самом деле является тем, что делает 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';}

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

принятый ответ (по состоянию на 29 июля 2019 года) остается в силе только в том случае, если вы еще не начали использовать более свежий подход SVG-with-JS в FontAwesome. В этом случае вам нужно следовать инструкциям на CSS-псевдоэлементах HowTo. В основном есть три вещи, на которые стоит обратить внимание:

• поместите атрибут данных в тег SCRIPT "data-search-pseudo-elements" загрузка файла fontawesome.min.js
• сделать так, чтобы сам псевдоэлемент отображался: нет
• правильное семейство шрифтов & сочетание шрифта и веса для Значок, который вам нужен: "Font Awesome 5 Free" и 300 (фал/свет), 400 (далекий/обычный) или 900 (фаст/твердый)

Ответ 6

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

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>

Ответ 7

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

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

Ответ 8

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