CODEWITHSUNDEEP
htmlbootstrap-4alignmentfont-awesome
scottapotamus
scottapotamus

Reputation: 598

Cannot align fontawesome icons on sidebar

I'm having some real trouble trying to align icons within their divs. Nothing I try works whether it be creating custom CSS or trying to use bootstrap's text-align-center.

Here's a cut down example of the navbar:

<div id="appSidenav" class="sidenav">
    <button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
    <button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
    <a href="#" class="pt-3">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-home"></i>
            </div>
            <div class="col">
                <span>Home</span>
            </div>
        </div>
    </a>
    <a href="#">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-users"></i>
            </div>
            <div class="col">
                <span>Contacts</span>
            </div>
        </div>
    </a>
</div>

I've tried to add text-center to the cols, I've also tried adding text-align: center; to the CSS but nothing seems to make any difference. I've also tried different sized cols and cols with no padding or margin.

I've tried adding an alignment to pretty much every tag or class and nothing works.

Any ideas?

Thanks!

UPDATE

Nobody seems to quite understand what I'm getting at, so I'll post a picture.

I've tried to align the icons using both CSS and bootstrap classes. I can live with it I guess but it's a bit annoying. Here's what's happening:

enter image description here

Upvotes: 0

Views: 248

Answers (3)

Eb Heravi
Eb Heravi

Reputation: 398

I don't understand what you mean exactly,

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome 5 Icons</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<div id="appSidenav" class="sidenav">
    <button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
    <button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
    <a href="#" class="pt-3">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-home"></i>  <span>Home</span>
            </div>
        </div>
    </a>
    <a href="#">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-users"></i> <span>Contacts</span>
            </div>
        </div>
    </a>
</div>
</body>
</html>

Upvotes: 3

charri
charri

Reputation: 1052

If you want to center align them, you can:

  • try text-align: center on the parent/wrapper of the item you are trying to center align
  • another method is to add display: flex to the parent/wrapper and margin: auto to the item you are trying to center align.

Upvotes: 0

Nitin
Nitin

Reputation: 21

i assume that you want to center align a link... If so i think u are supposed to add "a" after the div class in css... I will take home for exmaple.

I think the css should look something like,

.col a{ text-align:cenetr; }

Hopefully it helps.. thx

Upvotes: -1

Related Questions