How to split text inside button

Question

I have problem with new line... I want Fontawesome icon be on top and text under that. Can someone explaing how to do it?

Here is my code:

.options_button{
	float: left;
	width: 113px;
	height: 57px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	padding: 5px;
	border: 2px solid;
	border-color: #5f6a77;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  Save
</button>

Answer 1

The easiest way is to use flexbox:

.options_button{
	width: 113px;
	height: 57px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	padding: 5px;
	border: 2px solid;
	border-color: #5f6a77;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  Save
</button>

Answer 2

You can add a br to make a new line

.options_button {
  float: left;
  width: 113px;
  height: 57px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  padding: 5px;
  border: 2px solid;
  border-color: #5f6a77;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  <br/>Save
</button>