CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Rohan Mayya
Rohan Mayya

Reputation: 206

Aligning font-awesome icons to center

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <i class="fa fa-book fa-3x text-center" aria-hidden="true"></i>         
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
            <div class="col-md-4">
                <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
            <div class="col-md-4">
                <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
        </div><!--end row-->
    </div><!--end container-->
</section>

This is my code. I intend to center the font awesome icons to the center in their respective columns but I'm unable to do it.

Upvotes: 3

Views: 21646

Answers (5)

Bijal Patel
Bijal Patel

Reputation: 210

I think that this will work:

<div class="col-md-4" style="text-align:center;">
      <i class="fa fa-book fa-3x text-center" aria-hidden="true"></i>         
      <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
</div>

Upvotes: 0

Piyali
Piyali

Reputation: 506

Use this simplest way:

<div class="text-center"><i class="fa fa-book fa-3x text-center" aria-hidden="true"></i></div>

Upvotes: 0

Subash Matheswaran
Subash Matheswaran

Reputation: 215

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <section>
       <div class="container">
          <div class="row">
             <div class="col-md-4">
                <div class="text-center"><i class="fa fa-book fa-3x" aria-hidden="true"></i></div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
             </div>
             <div class="col-md-4">
                <div class="text-center"><i class="fa fa-book fa-3x" aria-hidden="true"></i></div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
             </div>
             <div class="col-md-4">
                <div class="text-center"><i class="fa fa-book fa-3x" aria-hidden="true"></i></div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
             </div>
          </div><!--end row-->
       </div><!--end container-->
    </section>

Put the font awesome icon into a separate div and apply "text-center" class. It will align font-awesome icons to center.

Upvotes: 0

sergdenisov
sergdenisov

Reputation: 8572

  1. You can move text-center to your column <div>, then all the text in this <div> will be centered (the first row in my example).
  2. You can add extra <div> with class text-center and move your icon inside it (the second row in my example).

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center">
                <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
            <div class="col-md-4">
                <div class="text-center">
                    <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                </div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
        </div><!--end row-->
    </div><!--end container-->
</section>

JSFiddle

Upvotes: 10

Venky
Venky

Reputation: 340

.center{
text-align:center;
width:50%;
}

HTML

<div class="center"><i class="fa fa-book fa-3x text-center" aria-hidden="true"></i></div>

This brings it to the middle as the way u wanted.

Upvotes: 0

Related Questions