2 Replies - 95 Views - Last Post: 13 January 2018 - 11:51 AM

#1 RamonRobben  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 82
  • View blog
  • Posts: 544
  • Joined: 19-May 14

Center font-awesome icon inside block

Posted 13 January 2018 - 07:55 AM

I was trying to make a sidebar with icons. But the icons aren't centered which makes them push some text further then others.
I would like to have the icons to be horizontally centered between the first 2 lines and I would like the text to start at the 3rd bar. Like in the image. How can I achieve such thing? I tried to make the icons fixed sizes but that is not exactly what I want.

Posted Image

HTML:
    <div id="sidebar">
      <h3>Exchange</h3>
      <small>Main Menu</small>
      <a href=""><i class="fa fa-pie-chart icon"></i>Portfolio</a>
      <a href=""><i class="fa fa-line-chart icon"></i>Prices</a>
      <a href=""><i class="fa fa-cloud icon"></i>Charts</a>
      <a href=""><i class="fa fa-cog icon"></i>Settings</a>
      <a href=""><i class="fa fa-heart icon"></i>Support</a>
      <a href=""><i class="fa fa-address-card icon"></i>About</a>
    </div>



CSS:
#sidebar {
  width: 250px;
  height: 100%;
  float: left;
  background-color: #1c344f;
  color: #586c86;
  overflow-x: hidden;
}

#sidebar i {
  margin-right: 20px;
}

#sidebar a {
  text-decoration: none;
  color: #586c86;
  display: block;
  padding:15px 20px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Center font-awesome icon inside block

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5121
  • View blog
  • Posts: 13,790
  • Joined: 18-April 07

Re: Center font-awesome icon inside block

Posted 13 January 2018 - 11:29 AM

Instead of throwing on a margin-right to your "<i>" tags, if you make them "display: inline-block" and give them a width you can keep that straight line margin. I have put in an example for you on codepen...

https://codepen.io/anon/pen/GyGzWx

Notice that I changed the CSS for the <i> tag and put in a display inline block and width and everything lines up. Hopefully this helps. :)
Was This Post Helpful? 1
  • +
  • -

#3 RamonRobben  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 82
  • View blog
  • Posts: 544
  • Joined: 19-May 14

Re: Center font-awesome icon inside block

Posted 13 January 2018 - 11:51 AM

View PostMartyr2, on 13 January 2018 - 11:29 AM, said:

Instead of throwing on a margin-right to your "<i>" tags, if you make them "display: inline-block" and give them a width you can keep that straight line margin. I have put in an example for you on codepen...

https://codepen.io/anon/pen/GyGzWx

Notice that I changed the CSS for the <i> tag and put in a display inline block and width and everything lines up. Hopefully this helps. :)/>/>


Thanks this does indeed help. But one other problem that I am having is with the settings (gear) icon. It leans more towards the left side. Any idea of how I can center this icon horizontally between the first 2 bars? fix this? I'll test some other things in the meantime and let you know if I find something.

EDIT:

I have found it in a different way. I forgot that the icons are just text. I added text-align: center; This is my code now:

#sidebar i {
  display: inline-block;
  width: 50px; /* made it a little bigger so that I could remove the padding on the ahref */
  text-align: center; /* This line did the trick */
}

#sidebar a {
  text-decoration: none;
  color: #586c86;
  display: block;
  padding:15px 0px; /* changed the padding from 20 to 0 */
}


This post has been edited by RamonRobben: 13 January 2018 - 11:59 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1