Text in button with icon is not centered vertically-CodePudding

I am trying to create a button that has an icon, but when I add the icon the text isnt centered vertically. How can I fix this?

This is the code in HTML & CSS:

<a href="#">
   <button ><span lang-css prettyprint-override">.parent-of-icon-and-text {
  display: grid;
  place-content: center;
}


Please don't use a button and a link, choose one that best fits your scenario.
To use a button as a link, you can put it in a form.


.signUp {
  background-image: var(--orange-background);
  border-image: var(--orange-background);
  font-family: poppins;
  font-weight: 600;
  color: white;
}
<form onsubmit="#">
  <button type="submit" ><span ></span>button</button>
</form>



    
CodePudding user response：

Corrections

It is invalid HTML to place a <button> inside an <a>nchor. They are both interactive content and should never have inertactive content as a descendant node. <a>nchor has been removed. For more details refer to Can I nest a <button> element inside an <a> using HTML5?.

Typo in HTML, "> missing:



<span ></span>



In CSS the font-family value of Poppins was misspelt as poppins (font-family values are case-sensitive).

Solution
The OP was incomplete so what is suggested in the example is as generic as possible. In the OP, span.icon-profile needs these two styles:
display: inline-block;
vertical-align: middle

vertical-align will set the tag's contents to a vertical position by either a pre-set value or a legnth value.
display: inline-block or table-cell is required by vertical-align
Further details are commented in the example below


/* 
The actual CSS to resolve alignment issues explianed by OP is marked with a ✼ which are `display: inline-block` and `vertical-align: middle` 
*/ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

/*
Global default for font
*/
:root {
  font: 2ch/1 Poppins;  
}

/*
Any rem unit measurements will reference 1rem to 2ch
*/
body {
  font-size: 2ch;
}

button,
b {
  display: inline-block; /*✼*/
  font-weight: 300;
}

.sign-up {
  font: inherit;
  border-radius: 4px;
  color: white;
  background: #333;
}

.btn-link:hover {
  outline: 1px solid cyan;
  color: cyan;
  cursor: pointer;
}

.btn-link:active {
  outline: 2px solid cyan;
  color: black;
  background: white;
}

.icon-profile {
  font-size: 1rem;
  vertical-align: middle; /*✼*/
}

/*
content: '⚙️' 
in HTML it's &#9881;&#65039;
*/
.icon-profile::before {
  content: '\002699\00fe0f';
}
<button ><b ></b> Profile</button>



    
CodePudding user response：

<span icon-profile"