CSS Icon position

Question

So i've been trying to change the icon position with Padding and Margin but the problem is that the 3 buttons moves along with it! I am trying to position the icon properly next to Sign in ! If anyone can help it would be great ! Thanks!

Here's my JSX code:

class Navigation extends Component {
  render(){
    return(
      <div className ='navBar'>
        <div className= 'menu-right'>
          <NavLink className="navBtn" to="/about">About</NavLink>
          <NavLink className="navBtn" to="/contact">Contact</NavLink>
          <NavLink className="navBtn" to="/3oss">
            <svg className='signInIcon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="M256 256c52.805 0 96-43.201 96-96s-43.195-96-96-96-96 43.201-96 96 43.195 96 96 96zm0 48c-63.598 0-192 32.402-192 96v48h384v-48c0-63.598-128.402-96-192-96z"/>
            </svg>
            Sign in
          </NavLink>
        </div>
        <div className="logo">
          <NavLink to = "/">Logo </NavLink>
        </div>
      </div>
    );
  }
}

And here's the CSS:

.menu-right {
  float: right;
  margin: 20px;
  padding: 5px;
}

.navBar {
  background-color: #dfe6e9;
  height: 70px;
  opacity: 0.6;
}

a.navBtn {
  text-align: center;
  background-color:#00b894;
  padding: 10px;
  border-radius: 10%;
  margin-left: 10px;
  color:white;
}

a.navBtn:hover {
  background-color:#fd79a8;
}

a.navBtn:link {
  text-decoration: none;
}

.logo {
  float:left;
  margin: 20px;
  font-size: 20px;

}
.signInIcon {
  height: 20px;
}

Here's the result:

When i Try to use padding or Margin it on .signInIcon it give me that:

Thanks for your help!

mccambridge · Accepted Answer · 2018-06-12 19:49:17Z

1

There are different ways to tweak icon position. If you just want to shift something a few pixels, I like to use position: relative; Something like this:

position: relative;
top: -3px;
left: 2px;

Adapt to your liking. This way, the "footprint" of the original element remains. The repositioned render only affects the appearance position of the element you're "moving", not it's actual position in the document flow.

answered Jun 12, 2018 at 19:49

mccambridge

1,0429 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stefo91 · Accepted Answer · 2018-06-12 19:53:01Z

0

Try

.signInIcon {
  position: relative;
  height: 20px;
}

answered Jun 12, 2018 at 19:53

stefo91

6166 silver badges17 bronze badges

Collectives™ on Stack Overflow

CSS Icon position

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related