how can i change the icons position?-CodePudding

I'm trying to add an icon to the a. but I feel that the icon is a bit too high. I want it to be a bit lower, How can I fix it?

My HTML:

<body>
  <div class="box">
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
      </svg>
      Your Profile</a>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
        <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
      </svg>
      Setting
    </a>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z" />
      </svg>
      Shopping Bag
    </a>
  </div>
</body>

and my CSS:

@import url('https://fonts.googleapis.com/css2?family=Zen Kurenaido&display=swap');
html, body {
  font-family: 'Zen Kurenaido', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: hsla(229, 86%, 81%, 1);
  background-image: linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -moz-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -webkit-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  color: #252e38;
  user-select: none;
  height: 100%;
  width: 100%;
}

.box {
  background-color: #ffffff;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 18px;
  width: 300px;
  height: 450px;
  box-shadow: 0 4px 5px 2px rgba(0,0,0,0.1);
}

.box > a {
  color: #252e38;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  transition: .2s;
  display: block;
  margin: 4px 0px;
}

.box > a:hover {
  background: rgba(100,100,100,0.1);
}

This is my Codepen: Codepen

And this is where I got my icons: Bootstrap Icons

CodePudding user response：

You can use display:flex with align-items:center on your links for that.

You'll need to add some margin-right to the svg to make the gap appear again.

(You will need to use the "Full Page" view of the snippet to see it beign rendered properly).

@import url('https://fonts.googleapis.com/css2?family=Zen Kurenaido&display=swap');
html,
body {
  font-family: 'Zen Kurenaido', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: hsla(229, 86%, 81%, 1);
  background-image: linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -moz-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -webkit-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  color: #252e38;
  user-select: none;
  height: 100%;
  width: 100%;
}

.box {
  background-color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 18px;
  width: 300px;
  height: 450px;
  box-shadow: 0 4px 5px 2px rgba(0, 0, 0, 0.1);
}

.box>a {
  color: #252e38;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  transition: .2s;
  display: flex;
  align-items: center;
  margin: 4px 0px;
}

.box>a>svg {
  margin-right: 5px;
}

.box>a:hover {
  background: rgba(100, 100, 100, 0.1);
}

<body>
  <div class="box">
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
      </svg> Your Profile</a>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
        <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
      </svg>
      Setting
    </a>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z" />
      </svg>
      Shopping Bag
    </a>
  </div>
</body>