Which element to use for font icons in bootstrap navbar

Question

Bootstrap 3 navbar uses glyphicons and Font Awesome icons as shown in html below. Bootstrap manual recommends to use span element:

            <span class="fa fa-pencil-square-o" aria-hidden="true"></span>

FontAwesome web page recommends to use i element:

            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>

Using i element makes icon bigger than using span . Bigger looks better.

Which element should used for font icons ?

<div id="sidebar-left" class="col-md-2">
            <div class="navbar-collapse sidebar-nav">
                <ul class="nav nav-tabs nav-stacked main-menu">
                            <li>
            <a href='OpenInvoice'>
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                <span>Invoice</span>
            </a>
        </li>

ASP.NET MVC4 is used in server.

Hi Andrus, look the [FontAwesome examples page](http://fortawesome.github.io/Font-Awesome/examples/), you have some advice for larger and fixed width of icon. — MaGiO, May 04 '15 at 08:51
Thank you. All those samples use element. Can `` replaced with `` safely in those samples ? — Andrus, May 04 '15 at 09:14
Hi Andrus you can simply use the `span` tag or any other element with `fa fa-_iconName_` class ;) — MaGiO, May 04 '15 at 10:03

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Using i element makes icon bigger than using span

This argument is moot as Font-Awesome's icons are font-based and can be sized manually with CSS's font-size property. This means that you can override the size of the icon yourself, regardless of which element you use.

Which element should I go with?

There have been several debates surrounding which element is best to use (see Should I use <i> tag for icons instead of <span>?), but ignoring semantics it's important to note that Font-Awesome icons are included within pseudo-elements (specifically ::before) - so unless it doesn't support the pseudo-element (like the inputelement, for instance), it really doesn't matter which element you go with.

What does the HTML specification say?

Unfortunately the specification doesn't tell us what we can do with font-based icons, however the key points are:

<span>

The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

<i>

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

You can make from this what you will.

Which element to use for font icons in bootstrap navbar

1 Answers1

Which element should I go with?

What does the HTML specification say?

`<span>`

`<i>`