将glyphicon添加到标题中

Question

在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标记内，图标变得过大。我更喜欢这样的事情：

如何缩小图标？

Answer 1

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

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

Answer 2

更改glyphicon的字体大小

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

}

JSfiddle Demo

Answer 3

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

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

Answer 4

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

尝试此代码

Answer 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>