Icon next to multi-line button

Question

My goal is to create a button that has multi-line text and an icon next to it that is centered for both lines. Here's a screenshot for better understanding

However, I'm not able to center the button. The icon is always next to the first line of the button, not to the second.

The code of my button

.btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  border: transparent;
  padding: 6px 16px;
  transition: background-color 100ms ease;
  outline: none !important;
  border-radius: 4px;
  line-height: 28px;
  background-color: #FBBC06;
  font-size: 18px;
  color: #022753;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.btn:before {
  font-family: 'Material Icons';
  content: 'shopping_cart';
  font-feature-settings: 'liga';
  font-size: 50px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class="btn">
    <span>von günstigstem Anbieter<br> in den Warenkorb legen</span>
</button>

As you can see the icon is only aligned to the first line in the button, but I want to have it vertically aligned to both of the lines.

I tried it without the span as well but the result was the same.

Thanks @MohammadUsman. I searched and searched but seems like I searched for the wrong term. — Musterknabe, Jan 03 '18 at 08:33

score 2 · Accepted Answer · answered Jan 03 '18 at 08:30

You can use position: absolute to align the icon vertically center. I have changed some of your css. Please check below

.btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  border: transparent;
  padding: 6px 16px 6px 70px;
  transition: background-color 100ms ease;
  outline: none !important;
  border-radius: 4px;
  line-height: 28px;
  background-color: #FBBC06;
  font-size: 18px;
  color: #022753;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.btn:before {
  font-family: 'Material Icons';
  content: 'shopping_cart';
  font-feature-settings: 'liga';
  font-size: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  left: 16px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class="btn">
    <span>von günstigstem Anbieter<br> in den Warenkorb legen</span>
</button>

That was easier than I expected. Thank you :) – Musterknabe Jan 03 '18 at 08:33 — Musterknabe, Jan 03 '18 at 08:33

score 0 · Answer 2 · answered Jan 03 '18 at 08:34

0

Using display: inline-block on .btn>span aligns both lines next to the icon. You can then use vertical-align to center them vertically.

.btn>span { display: inline-block }

answered Jan 03 '18 at 08:34

Malte Hartwig

4,477
2
14
30

Icon next to multi-line button

2 Answers2