Question

Bootstrap 3导航栏使用glyphicons和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

使用i元素会使图标大于使用span

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

我应该选择哪个元素？

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

HTML规范说什么？

不幸的是，规范并未告诉我们如何使用基于字体的图标，但关键点是：

<span>

span元素本身并不意味着什么，但与全局属性一起使用时可能很有用，例如class，lang或dir。它代表了它的孩子。

<i>

i元素表示一个替代语音或心情的文本范围，或以指示不同文本质量的方式偏离正常散文，例如分类标识，技术术语，西方文本中来自另一种语言，音译，思想或船名的惯用短语。

你可以从中做出你想做的事。

在bootstrap导航栏中用于字体图标的元素

1 个答案:

我应该选择哪个元素？

HTML规范说什么？

`<span>`

`<i>`