Struggling to center my Font Awesome Icons

Question

I am having trouble centering my font-awesome icons and my buttons. I tried doing in through a through my CSS folder and I also tried inline styling as well. I have them both in my example below. Can somebody tell me why it is not centering and what would be the best approach to fixing this?

https://jsfiddle.net/silosc/0emaydqn/11/

Here is my HTML folder:
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry, this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
        <li><span class="fa-li"><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>

    </ul>
    <br />
    <br />
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

This is my CSS folder:

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul i {

  justify-content: center;
}

button {
  justify-contern: center;
}

I want to center the icon with the text. – csb00 Nov 05 '19 at 16:44 — csb00, Nov 05 '19 at 16:44

score 1 · Answer 1 · answered Nov 05 '19 at 17:02

Simply remove the <span> tag from the li and use font-awesome directly in <i> tag. I have also added some padding to the <i> tag or fa icon so that it doesn't collapse with the <li> text.

For centering the buttons simply add those in a div and give property to that div text-align:center;

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul li .fa{
padding-right:5px;
}


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

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry, this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><i class="fa fa-calendar"></i>Checking your date range and readjust it</li>
        <li><i class="fa fa-file-text"></i>Importing your file by clicking on the Upload Data button</li>
        
    </ul>
    <br />
    <br />
    <div class="center-div">
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
    </div>
</div>

Hope this helps you.

Ramesh · Answer 2 · 2019-11-06T07:48:30.450

fa-li class cause the problem. Because it contains the CSS of being an absolute element. You can simply remove the fa-li class from the span tags. To maintain a space you can add padding or margin values. Below snippet can help you.

To centre the buttons I have wrapped the buttons with a div which is initially a block element. By adding text-align:center CSS to the div(block) element, it centers the children(buttons).

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul i {
  justify-content: center;
}

button {
  justify-contern: center;
}

ul li>span {
  margin-right: 5px;
}
.btn-wrapper{
text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="report-card-sm">
  <h2>
    We're sorry, this page is under construction.
  </h2>
  <p>We reccomend you try the following:</p>
  <ul class="fa-ul">
    <li><span><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
    <li><span><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>
  </ul>
  <br />
  <br />
  <div class="btn-wrapper">
    <button class="btn-orange fa-orange">Go Back</button>
  <button class="btn-orange fa-orange">Upload Data</button>
  </div>
</div>

please notice that this solution does not center the buttons "centering my font-awesome icons and my buttons" — Dennis van de Hoef - Xiotin, Nov 06 '19 at 07:19
@dennisvandehoef Sorry, my bad. I have updated the answer. Please check — Ramesh, Nov 06 '19 at 07:48

Ritesh Khandekar · Answer 3 · 2019-11-06T08:04:20.483

Try with flexbox:

ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

CSS:

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

Use <center> tag in HTML 4.01:

<center>
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</center>

In HTML5: you will need to group buttons in a div and use text-align: center

<div style="text-align: center">
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

JSfiddle

please notice that this solution does not center the buttons "centering my font-awesome icons and my buttons" — Dennis van de Hoef - Xiotin, Nov 06 '19 at 07:20

score 0 · Answer 4 · answered Nov 05 '19 at 16:37

0

You should put text-align: center; on the parent elements (create one ?).

And create a new class for <span class="fa-li"> to unset position: absolute; and maybe set a margin-right to unstick icon and text

answered Nov 05 '19 at 16:37

Khalenn

111
8

score 0 · Answer 5 · answered Aug 06 '20 at 16:32

0

I faced this same issue while working with a django project. All I did was to include the html doctype tag and my icons were back in center.

You might want to try it out

answered Aug 06 '20 at 16:32

Toluwalope Olanrewaju

1

Struggling to center my Font Awesome Icons

5 Answers5