将字形添加到标题答案

【问题标题】：Add glyphicon to headings将字形添加到标题
【发布时间】：2015-08-06 17:16:54
【问题描述】：

就像在this 答案中一样，我正在尝试将图标添加到h3 标记。结果如下：

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Play it! <span class="glyphicon glyphicon-play text-primary"/></h1>

还有jsfiddle 可用。

但是在h3 标签内，图标变得太大了。我更喜欢这样的：

如何让图标变小？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案1】：

根据您的 HTML，只需添加 CSS：

h1 span.glyphicon-play{
    font-size: 0.5em;
    vertical-align: 5px;
}

【讨论】：

【解决方案2】：

改变字形的字体大小

h1 .glyphicon {
font-size:.5em;

}

JSfiddle Demo

【讨论】：

【解决方案3】：

<h1>Play it! <span class="glyphicon glyphicon-play" style="font-size:15px;"></span></h1>

试试这个代码

【讨论】：

【解决方案4】：

有很多可能的方法，一种方法是为它编写css，如上面的回复中所述。另一种可能的方法是使用<small> 标签。如果您不想动态减小 css 中的字体大小，这将是答案。另一种解决方案是给它一个新类btn-sm，特别是如果这是一个按钮。

http://jsfiddle.net/agqqft99/10/

【讨论】：

【解决方案5】：

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Play it! <span class="glyphicon glyphicon-play text-primary"/></h1>

【讨论】：