CSS图标位置

所以我一直试图用填充和边距来改变图标的位置，但问题是这3个按钮会随之移动！我正在尝试将图标正确放置在登录旁边！如果有人能帮忙，那就太好了！谢谢

以下是我的JSX代码：

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>
    );
  }
}

结果如下：

当我尝试在

上使用填充或边距时，它会告诉我：


谢谢你的帮助
 有不同的方法来调整图标位置。如果你只想移动一些像素，我喜欢使用
position:relative类似这样的内容：

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

适应你的喜好。这样，原始元素的“足迹”就保留了下来。重新定位的渲染只影响正在“移动”的元素的外观位置，而不影响它在文档流中的实际位置。
试试看

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

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