Использование чисел со шрифтом Awesome

Ответ 1

У Font awesome на самом деле есть встроенная поддержка для размещения обычного текста (то есть цифр, букв и т.д.) Поверх значков.

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

HTML:

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

CSS:

.calendar-text { margin-top: .3em; }

Ответ 2

Следующий код даст круг с номером

<span class="fa-stack fa-3x">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <strong class="fa-stack-1x">1</strong>
</span>

Следующий код даст сплошной кружок с номером

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <strong class="fa-stack-1x text-primary">1</strong>
</span>

Здесь text-primary класс (из начальной загрузки) используется для установки цвета числа

Ответ 3

Чтобы включить буквы и цифры, таблица стилей для FA слишком велика, и они не поддерживают ее (https://github.com/FortAwesome/Font-Awesome/issues/5019). так что я делаю так:

.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;   
}

затем

<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>

это оставляет хороший чистый шрифт, и вы все равно можете использовать глупую я (em), чтобы сохранить trakc из "значков". Плюс к этому сохраняются все символы типа значков в пределах одного и того же элементарного пространства... (.fa - ^)

Я считаю, что этот поток был для значка с кругом вокруг него. Поэтому вы должны изменить этот CSS выше, чтобы сделать его <span> вместо <button> и создать блок-элемент в вашем диапазоне.

.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}

то

<span class="f-circle"><i class="fa-alph">2</i></span>

Ответ 4

Вы можете просто сделать что-то вроде этого:

<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i> 
<i class="fa fa-star" aria-hidden="true"> 3</i> 
...

Ответ 5

Не знаю, что я знаю! На самом деле Font awesome - это шрифт, используемый для отображения только значков. Ниже приведен список возможных значков Fontawesome-icons.

Вы могли бы сделать это многими другими способами, я бы сделал это, используя один из этих двух других методов в зависимости от того, что вы ищете. Например...

Простой круг с числом внутри, то, как я мог бы пойти, будет с CSS, создав круг и используя обычный текст внутри. В Google есть много сообщений/примеров. Вот один из них: как создавать круги с помощью css

Если вы хотите достичь этого с помощью чего-то более графического/значка, я предлагаю взглянуть на Fontello, это создает шрифт из ваши собственные файлы svg. Таким образом, вы можете делать свои собственные номера с изображениями в качестве фона и отображать числа в виде значков, как это делает fontawesome.

Имейте хороший!

Панчо