Question

我一直在使用Bootstraps Glyphicons几天，我尝试在带有glyphicon图标的按钮中添加一些文字：

<button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href':'#'+'TableA'}">
     <span class="glyphicon glyphicon-th-list" aria-hidden="true" data-bind="text:' Details'"></span>
 </button>

单击时会显示一个表格。我需要文本为Arial，但如果我在bootstrap.css内更改它，或者我添加：

<span class="glyphicon glyphicon-download-alt" aria-hidden="true" data-bind="text:' Download', style:{fontFamily: 'Arial'}"></span>

它将文本font-family更改为Arial，但glyphicon图标消失。我究竟做错了什么？可以使用glyphicon图标更改按钮内文本的字体系列吗？

Answer 1

将我的短<span/>定义扩展为已扩展的<span></span>）后，字体已修复。

原始版本（无效字体）：

        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-send"/>
            &nbsp;Send message
        </button>

修正版：

        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-send"></span>
            &nbsp;Send message
        </button>

我真的不明白为什么这对我有用......

Answer 2

您可以尝试将要更改字体内的字体的文本放在元素中。然后为span指定一个类或id，并在css文件中将span的font-family更改为你需要的那个，这不应该影响Glyph。

/ S

Answer 3

只需使用

<button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href':'#'+'TableA'}">
     <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>&nbsp;
     <span style="--your style--">Download</span>
 </button>

Bootstrap Glyphicons在按钮上更改字体系列

3 个答案: