Using Numbers With Font Awesome

Question

I want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome.

I'd like to use circles with a 1, 2, 3... in it. Is this possible?
Will Font Awesome be adding numbers to the list of icons?

Thanks!

Answer 1

Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons.

Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.

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

Answer 2

Following code will give a circle with a number

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

Following code will give a solid circle with a number

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

Here the text-primary class (from bootstrap) is used to set the colour of the number

Answer 3

To include letters and numbers would make the style sheet for FA way too large and they do not support it ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). so what i do is like such:

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

then

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

this leaves a nice clean font and you can still use the silly i ( em ) to keep trakc of "icons." Plus this keeps all icon type characters within the same elemental scope... (.fa-^)

I believe this thread was for an icon with a circle around it. So you would modify this CSS above to make it a <span> instead of a <button> and creat a block element in your span.

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

then

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

Answer 4

You can just do something like this instead :

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

Answer 5

I find this works nicely within WordPress widgets (after adding in the CDN styesheet to the header):

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>

Answer 6

As an alternative to font awesome and HTML/CSS, find an example you like and create something similar in Photoshop. Export the PNGs. Takes about 10 minutes.

Answer 7

Not that I know off! Actually Font awesome is a font used to render icons only. Here is a list of possible icons Fontawesome-icons.

You could do this in many other ways i would do it using one of this 2 other methods depending on what your looking for. For example...

A simple circle with a number inside, the way I would go would be with CSS, creating a circle and using normal text inside. There are tons of posts/examples in google for that. Here is one : how to create circles with css

If you want to achive this with something more graphic/icon I suggest taking a look at Fontello, this creates a font out of your own svg files. So you could do your own numbers with images as background and render the numbers as icons just like fontawesome does.

Have a good one!

Pancho