1

I'm looking to achieve the button this photo, but I can't work out how to align the icon with the text?

enter image description here

Current code:

.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 17px;
  background: #72a031;
  display: inline-block;
  padding: 0px 30px 0px 25px;
  text-decoration: none;
}

.btn:hover {
  background: #61872c;
  text-decoration: none;
}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<button class='btn'>
    <i style="font-size: 1.73em; position: relative;" class="fab fa-steam-symbol"></i> Log in with Steam
</button>

I understand it's messy, it's really late and I just want this SIMPLE thing working!

Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
  • 1
    You mean to center it vertically ? – Akshay Apr 25 '18 at 16:18
  • @Akshay yea, I have tried a few things but just gave up and decided I would ask the great people of Stack xD –  Apr 25 '18 at 16:24
  • The answer below by @Racil Hilan works, you can optionally add `border:0` and `outline:0` to the `.btn` to make it look more like the image – Akshay Apr 25 '18 at 16:26

1 Answers1

3

You can simply add vertical-align: middle to all elements/content inside the button using .btn * as a CSS selector:

.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 17px;
  background: #72a031;
  display: inline-block;
  padding: 0px 30px 0px 25px;
  text-decoration: none;
}

.btn * {
  vertical-align: middle;
}

.btn:hover {
  background: #61872c;
  text-decoration: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<button class='btn'>
  <i style="font-size: 1.73em; position: relative;" class="fab fa-steam-symbol"></i> Log in with Steam
</button>
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
  • Omg, that worked... You don't understand, it's like 3am here and I have been so stumped on this xD <3 <3 <3 <3 –  Apr 25 '18 at 16:26
  • Many of us don't realize that vertical alignment in CSS works differently from horizontal alignment. You need to apply the vertical alignment to the children while you apply the horizontal alignment to the parent. – Racil Hilan Apr 25 '18 at 16:29