将字形图标添加到标题

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

更改字形的字体大小

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

}

JSfiddle Demo

Answer 3

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

试试这个代码

Answer 4

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

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

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>

将字形图标添加到标题

Add glyphicon to headings

css

twitter-bootstrap

glyphicons

twitter-bootstrap-3