位置后的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

有两种方法可以通常添加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来做到这一点.至少,你必须包含的字体家庭和字符代码.

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

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

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

Answer 2

您的第一个解决方案是最好的解决方案。用另一种方式做确实没有任何意义，因为这就是你如何使用 Bootstrap 将字形图标放到你的网站上