Using Numbers With Font Awesome - html

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