字体awesome在div中不能很好地显示自定义类和行类(font awesome doesn't display well in div with custom class and row

编程入门行业动态更新时间:2024-10-15 08:22:20

字体awesome在div中不能很好地显示自定义类和行类(font awesome doesn't display well in div with custom class and row class)

编辑：这就是它所显示的内容

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

工作

不工作

CSS

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

有什么想法吗？谢谢。

Edit : This is what it shows

I want to use font awesome using : <span class="fa fa-user"></span>. When I put this code in the div with row and custom class, it doesn't work. But when the div has only row class, it works.

WORK

DOESN'T WORK

CSS

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

Any Idea please ? Thanks.

最满意答案

它的工作正常我猜。让我们知道哪些不起作用？

编辑：

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

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

编辑2：另一种选择：

没有改变任何css替换跨度我喜欢这样：

它会在不改变你的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> 
  
 
It is working fine I guess. Let us know what is not working? 
EDIT: 
Remove the font-family in the below style that you are using and it will work fine (it overrides font-awesome styles) 
.bottom span {
    font-size: 12px;
    font-family: Arial, sans-serif;
}
 
EDIT 2: Another option: 
Without changing any css replace span with i like this:  
<i class="fa fa-user"></i>
 
and it will work without changing your 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>