位置后的Bootstrap glyphicon

Question

问题

我想在文字后面显示一个glyphicon图标。在文档中，您可以在此处看到前面的示例：http://getbootstrap.com/components/#glyphicons-examples

<div class="glyphicon glyphicon-chevron-right">Next</div>

我的解决方案

解决方案1 ​​

<div>Next<span class="glyphicon glyphicon-chevron-right"></span></div>

解决方案2

#next.custom-chevron-right:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

<div id="next" class="glyphicon custom-chevron-right">Next</div>

来源示例：bootply

我的问题

有没有更好的方法只使用bootstrap类？

Answer 1

通常有2种方法可以添加glyphicons（或使用任何其他图标字体）。第一种方式是通过html添加它们。

<div>Next <span class="glyphicon glyphicon-chevron-right"></span></div>
// Be sure to add a space in between your text and the icon

使用CSS执行此操作的第二种方式。至少，必须包含 font-family 和字符代码。

<div><span>Next</span></div>

span::after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

显然，使用CSS方法，您可以添加其他样式，但此示例显示了使图标显示在相对正确位置所需的最小值。

Answer 2

您的第一个解决方案是最佳解决方案。用另一种方式做到这一点并没有任何意义，因为无论如何你将这些glyphicons放到你的网站上