Text in button with icon is not centered vertically

Question

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 class=" account signUp"><span class="icon-profile</span>button</button>
</a>


.signUp {
  background-image: var(--orange-background);
  border-image: var(--orange-background);
  font-family: poppins;
  font-weight: 600;
  color: white;
}

Answer 1

but when I add the icon the text isnt centered vertically

Put the following two properties on its parent

.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" class="account signUp"><span class="icon-profile"></span>button</button> </form>

Answer 2

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 class="icon-profile "> </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 ⚙️ */.icon-profile::before { content: '\002699\00fe0f'; }

 <button class="account sign-up btn-link"><b class="icon-profile"></b> Profile</button>