2

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 用于服务器。

4

1 回答 1

2

使用i元素使图标比使用跨度更大

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

我应该选择哪个元素？

围绕哪个元素最好使用存在一些争论（请参阅我应该为图标使用 <i> 标记而不是 <span> 吗？），但忽略语义，重要的是要注意 Font-Awesome 图标包含在伪元素中（特别是::before) - 所以除非它不支持伪元素（例如input元素），否则你使用哪个元素并不重要。

HTML 规范是怎么说的？

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

<span>

span元素本身没有任何意义，但与全局属性（例如 、 或 ）一起使用时会class很有lang用dir。它代表它的孩子。

<i>

该i元素以替代语音或语气表示一段文本，或以其他方式偏离正常散文以指示不同质量的文本，例如分类名称、技术术语、来自另一种语言的惯用短语、音译、一个想法，或西方文本中的船名。

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

于 2015-05-06T16:04:11.960 回答