CODEWITHSUNDEEP
htmlcssbuttonsvg
theaemarie
theaemarie

Reputation: 85

SVGs + Words in buttons

There's something fundamental that I seem to be missing about buttons. In my dream world, I could have a line of buttons, with either SVG only, SVG + Text, or just Text and they'd all live in the same space.

HTML:

<div class="container">
  <button><svg class="icon"><use xlink:href="#icon-twitter-retweet" /></svg></button>
  <button><svg class="icon"><use xlink:href="#icon-twitter-fav" /></svg> Words</button>
  <button>Words</button>
</div>

CSS:

button {
  display: inline-flex;
  padding: 0px 10px;
  font-size: 50px;
  line-height: 1;
}
.icon {
  width: 1em;
  height: 1em;
}

Buttons in row

I can't seem to get the heights to all be in unison in the line, and to have the SVG Icon centered.

If you tab over the buttons, you can see the text content extends outside of the button, but I can't seem to figure out why as both font-size and line height should be the same.

Tabbing over buttons.

Here's a codepen of a working example to play around with: https://codepen.io/theaemarie/pen/RGAwZj

Upvotes: 0

Views: 32

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42314

The secret that you're missing is vertical-align: middle on button, which vertically-aligns an image next to text.

I've created an updated pen showcasing this here.

Hope this helps! :)

Upvotes: 1

Related Questions