twitter-bootstrap - Bootstrap 导航栏中的字体图标使用哪个元素

Question

Bootstrap 3 导航栏使用字形和 Font Awesome 图标，如下面的 html 所示。 Bootstrap手册推荐使用span元素:

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

FontAwesome网页推荐使用i元素:

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

使用 i 元素使图标比使用 span 更大。越大越好。

字体图标应使用哪个元素？

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

Answer 1

Using i element makes icon bigger than using span

这个论点没有实际意义，因为 Font-Awesome 的图标是基于字体的，并且可以使用 CSS 的 font-size 手动调整大小。属性(property)。这意味着您可以自己覆盖图标的大小，无论您使用哪个元素。

我应该选择哪个元素？

围绕哪个元素最好使用存在一些争论(参见 Should I use <i> tag for icons instead of <span>? )，但忽略语义，重要的是要注意 Font-Awesome 图标包含在伪元素中(特别是 ::before ) - 所以除非它不支持伪元素(例如 input 元素)，使用哪个元素并不重要。

HTML 规范怎么说？

不幸的是，规范没有告诉我们可以使用基于字体的图标做什么，但关键点是:

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

你可以用它做你想做的事。