Aligning font-awesome icons to center

Question

<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.

score 10 · Accepted Answer · answered Feb 18 '17 at 13:21

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).
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

score 0 · Answer 2 · edited Feb 27 '17 at 04:46

0

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>

edited Feb 27 '17 at 04:46

Chiheb Nexus

9,104
4
30
43

answered Feb 18 '17 at 13:14

Bijal Patel

210
1
3

@Solias you shouldn't use inline styles in CSS, see [this question](http://stackoverflow.com/questions/3142710/inline-styles-vs-classes) for the explanation. Use `text-center` class instead, see [my answer](http://stackoverflow.com/a/42315688/2570353). – sergdenisov Feb 18 '17 at 13:36
ahh, i will look through this once again. I was in a hurry and was looking for a quick fix so; will incorporate the text-center class now and see how it pans out. – Rohan Mayya Feb 18 '17 at 13:49

score 0 · Answer 3 · answered Feb 18 '17 at 13:14

0

.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.

answered Feb 18 '17 at 13:14

Venky

350
3
15

Subash Matheswaran · Answer 4 · 2017-02-18T13:29:27.183

    <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.

score 0 · Answer 5 · edited Feb 19 '17 at 05:28

0

Use this simplest way:

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

edited Feb 19 '17 at 05:28

Vasily Kabunov

6,511
13
49
53

answered Feb 19 '17 at 04:54

Piyali

506
2
11

Aligning font-awesome icons to center

5 Answers5