将字形添加到标题

Posted 2023-03-06

【中文标题】将字形添加到标题

【英文标题】：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 标签内，图标变得太大了。我更喜欢这样的：

如何让图标变小？

【参考方案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>