使用自定义 class 和行 class，字体真棒在 div 中显示不佳

Question

编辑：这是它显示的内容

我想使用很棒的字体：<span class="fa fa-user"></span>。当我将此代码放入带有行和自定义 class 的 div 中时，它不起作用。但是当 div 只有行 class 时，它起作用了。

工作

<div class="row">
    <div class="col-md-12" >
        <div class="col-md-3">
            <span class="fa fa-user"></span>
        </div>
    </div>
</div>

不起作用

<div class="row bottom">
    <div class="col-md-12" >
        <div class="col-md-3">
            <span class="fa fa-user"></span>
        </div>
    </div>
</div>

CSS

.bottom
{
    height:auto;
    background-color:#5C772A;
    color: white;
    margin-top:30px;
}

有什么想法吗？谢谢。

Answer 1

我想它工作正常。让我们知道什么不起作用？

编辑：

删除您正在使用的以下样式中的 font-family，它将正常工作（它会覆盖 font-awesome 样式）

.bottom span {
    font-size: 12px;
    font-family: Arial, sans-serif;
}

编辑 2： 另一个选项：

不改变任何 css 将 span 替换为 i 如下：

<i class="fa fa-user"></i>

无需更改您的 css！

.bottom
{
    height:auto;
    background-color:#5C772A;
    color: white;
    margin-top:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row bottom">
    <div class="col-md-12" >
        <div class="col-md-3">
            <span class="fa fa-user"></span>
        </div>
    </div>
</div>

Answer 2

这是因为您正在使用此 css 规则：

.bottom span {
    font-size: 12px;
    font-family: Arial, sans-serif;
}

这将覆盖字体 awesome 跨度的 font-family，您应该删除 font-family 规则，一切都会正常工作。

或者您可以使用非 CSS 选择器将您的规则添加到 .bottom 但 .fa 范围内的每个范围：

.bottom span:not(.fa) {
    font-size: 12px;
    font-family: Arial, sans-serif;
}

或者您可以使用 <i class="fa fa-user"></i> 而不是字体超棒图标的 span。

使用自定义 class 和行 class，字体真棒在 div 中显示不佳

font awesome doesn't display well in div with custom class and row class

html

css

fonts

twitter-bootstrap

font-awesome