arshie92 arshie92 - 3 months ago 8
HTML Question

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

Edit : This is what it shows font

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

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


DOESN'T WORK

<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;
}


Any Idea please ? Thanks.

Answer

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>