CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 35

Center Icon Separately From Corresponding Text

just a quick one. I have 3 Font Awesome icons that i'm using for contact buttons on my page. These are aligned vertically and centered within a container div. I also have text next to each icon, which results in both icon and text being centered on the page. What i'm after is to center the icons vertically and have the text follow separately. I believe I could wrap the icons in a container then all the corresponding text in another container, but I realise this would look messy in my CSS. There must be a simple answer out there that i'm not realising. If you don't understand what i'm going on about please view the code snippet below. Thanks for any feedback.

<section class="contact-main">
  <div class="container">
    <div class="email">
      <i class="fas fa-envelope fa-3x"><p> Email</p></i>
    </div>   
    <div class="phone">
      <i class="fas fa-phone-square fa-3x"><p> Phone</p></i>
    </div>      
    <div class="facebook">
      <i class="fab fa-facebook-square fa-3x"><p> Facebook</p></i>
    </div>
  </div>        
</section>

Upvotes: 0

Views: 44

Answers (3)

Alex
Alex

Reputation: 122

Something like this? Fiddle

<body>
<section class="contact-main">
    <div class="container">
    <div class="list-group">
      <div class="email">
        <i class="fa fa-envelope fa-3x fa-fw"></i><h3 style="display:inline-block;">Email</h3>
      </div>   
      <div class="phone">
        <i class="fa fa-phone-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Phone</h3>
      </div>      
      <div class="facebook">
        <i class="fab fa-facebook-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Facebook</h3>
      </div>
    </div>
    </div>        
</section>
</body>

Upvotes: 0

Alex
Alex

Reputation: 35

Was overthinking the whole thing. I just moved them into alignment using position: relative. Lightbulb finally lit up!

Upvotes: 0

Farhan Haque
Farhan Haque

Reputation: 1011

You can use fixed-width icons with class fa-fw . Here is the link.

HTML

<div class="list-group">
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

I hope it helps.

Upvotes: 1

Related Questions