Navigation + FA Icons

[Blasteh]

Hi,
I'm currently trying to figure something out. I want to know if there is an easier way of doing what I'm trying to accomplish.

So basically, it's a sidebar with a FA Icon, then the name of the page (menu).

You must be registered for see images attach

For the first two, I did this:

      <a href="/" class="sidebar__nav__item sidebar__nav__item--active">
        <i class="fa fa-tachometer fa-lg" style="padding-right: 10px;"></i>
        Dashboard
      </a>
      
      <a href="./statistics" class="sidebar__nav__item ">
        <i class="fa fa-line-chart fa-lg" style="padding-right: 7px;"></i>
        Statistics
      </a>

As you can see, I added a style to them, spacing them out so it makes them aligned. If they're both set to 10px - then they will not be aligned with each other.

Which is fine, because there is only two of them so it's not much editing. But, it's going to get more difficult (annoying) if you add more. For the third one, I did this:

      <a href="./general/" class="sidebar__nav__item ">
        <i class="fa fa-folder fa-lg"></i>
        General
      </a>

As you can see, it's not spaced out (which I know) but it's hard to tell if they're all aligned with each other. I was wondering if someone could show me an easier way to align them all within the CSS file itself.

Thanks.

 

[Markshall]

If I were you, I'd give the i element a set width and make it display inline block, then apply spacing as you want it so you don't need to apply a custom amount of padding to each one

You could achieve it by doing something like

.sidebar__nav__item i {
    display: inline-block;
    width: 40px;
}

The width and making it inline-block will make each icon a set width, whilst not distorting/pixelating the actual icon so each icon will have the same amount of space between itself and the text beside it. You will of course then have to remove your style attribute from each i element in your HTML.

I'm not sure if I've explained that well, I'm tired and I'm on mobile. Hope it helps though.

You must be registered for see links

 

[Menkz]

Font Awesome has a class to do this in-built with "fa-fw" -

You must be registered for see links