How to center fontawesome icons?

Question

i want to center my fontawesome icons in the middle. They are in a container. I'm using Bootstrap and the Grid System of bootstrap. I already tried it with text-align:center;, but it doesnt work.

Here is my HTML Code:

<div class="row">
  <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>


</div>

And, here's my CSS Code:

.icon {
  text-align: center;
  display:inline-block;
}

What's not "in the middle" about them? In the middle of what? — mayersdesign, Apr 09 '17 at 12:20
If you mean it like this, @AzeezKallayi `
` or either this, `.col-md-1 { text-align: center; !important }` I need to say it doesnt work. :( @mayersdesign I want to place the icons in the middle of the website. They are in the left. — smaxxx, Apr 09 '17 at 12:21
@zurfyx i dont want to center the text. I just found a example of what i want to do: http://prntscr.com/eua2p5 <-- this ( http://codepen.io/yanessa/pen/yMbpqv ) — smaxxx, Apr 09 '17 at 12:29
You need to add sufficient code that we can reproduce your problem, please add that code to the question, using the [edit] link (this one, or the one below your question) so that it can be read. Further you need to explain exactly what you're currently seeing, and what you want to see instead. Ideally add a picture to your post showing what you have, and another showing what you want. Then we might be able to help you. — David Thomas, Apr 09 '17 at 23:06

score 0 · Answer 1 · answered Apr 09 '17 at 12:31

0

Have you tried to add this: '

.row{
    display: flex;
   justify-content: center;
}

`

And some left and right margin to separate them.

answered Apr 09 '17 at 12:31

Sandro Das Neves

1
1
4

No i didn't. But this fixed it. I thank you very very much! – smaxxx Apr 09 '17 at 12:34
Happy that help you. – Sandro Das Neves Apr 09 '17 at 19:44

score 0 · Answer 2 · answered Apr 09 '17 at 12:36

0

You need to apply "text-center" class with the "row" class like this:

<div class="row text-center">
     <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div>
     <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div>
     <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div>
</div>

You then don't need "center-block" class. Also if its just 3 columns in a row you can divide it in equal width for ex - "col-md-4" instead of "col-md-1"

This should help.

answered Apr 09 '17 at 12:36

Archana

103
6

This fixed it too. Thank you very very much! – smaxxx Apr 09 '17 at 12:38
great it helped @smaxxx – Archana Apr 09 '17 at 12:44

score 0 · Answer 3 · answered Apr 09 '17 at 12:39

you can try this:

<div class="row">
  <div class="col-md-1">
       <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  </div>
  <div class="col-md-1">
      <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  </div>
 <div class="col-md-1">
      <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
 </div>

which .align-center has this property:

.align-center
{
    text-align: center;
}

score 0 · Answer 4 · answered Apr 09 '17 at 12:41

Now it works fine. You can try this code:

.icon-container{
 margin: 0 auto;
 display: table;
}

<div class="row">
 <div class="icon-container">
  <i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i>
  <i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i>
  <i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i>
 </div>
</div>

How to center fontawesome icons?

4 Answers4