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

Does this answer your question? [Vertical alignment of text and icon in button](https://stackoverflow.com/questions/17478710/vertical-alignment-of-text-and-icon-in-button) — gokhancevik, Feb 28 '22 at 20:16
Include `.icon-profile` ruleset (ex. `icon-profile {.....}`) and `.account` if it has any styles. — zer00ne, Feb 28 '22 at 20:17
Please make your code into a snippet and check that option runs to show the problem, I assume the incorrect syntax in the span as shown in your question currently is just typos? — A Haworth, Feb 28 '22 at 20:30
Aside from the obvious typo and unclosed tags, there are a few missing CSS pieces that could contribute to styling gltches. (e.g. `var(--orange-background)` custom property, `.account`, `.icon-profile` classes, or any other relevant CSS selectors). Your provided code sample is incomplete and cannot reproduce the issue you're describing. Please include the fuller context. — Bumhan Yu, Feb 28 '22 at 20:49

score 0 · Answer 1 · answered Feb 28 '22 at 20:39

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>

score 0 · Answer 2 · answered Feb 28 '22 at 22:13

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 &#9881;&#65039;
*/
.icon-profile::before {
  content: '\002699\00fe0f';
}

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

Text in button with icon is not centered vertically

2 Answers2