How can I make the font-awesome can take the full area of its parent container

Question

As you can see the thumbs are over its parent area. The UI layout is not acceptable.

The following is the expected result. I tried to put margin-bottom with a negative number, Or tried to make them in FLEX layout. None of them works. Any ideas?

Parent container

#vote-buttons-section .iconic-button#upvote {
  background: #7f7f7f !important;
  width: 75px;
  height: 55px; }
#vote-buttons-section .iconic-button#downvote {
  background: #7f7f7f;
  height: 55px;
  width: 75px; }

Font-awesome icons appear on the BEFORE attribute

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before {
  font-family: FontAwesome;
  content: "\f087";
  font-size: 55px;
  color: white;
  vertical-align: middle;
  line-height: 55px;
  }

.ui-button.iconic-button.iconic-button-downvote:before,
.ui-button.iconic-button.iconic-button-downvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-downvote.ui-state-focus:before {
  font-family: FontAwesome;
  content: "\f088";
  font-size: 64px;
  color: white;
  vertical-align: middle; }

Answer 1

Seems like the heights of the containers are 55px . What you can do is to add the rule line-height: 55px; to the part that's handling the icons. It seems like you should add it to the selectors

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before

Then it should be centered. You can adjust the font-size if you want, as long as the line-height is correct, it will be centered.

Answer 2

What I would do, is to add the height: inherit; and some padding like this:

#vote-buttons-section .iconic-button#upvote {
   height: inherit;
   padding: 10px 10px;
}

If it doesn't work, add the !important to the CSS properties, like this:

#vote-buttons-section .iconic-button#upvote {
   height: inherit !important;
   padding: 10px 10px !important;
}

Hope this helps.

EDIT: I didn't see that you solved the problem by a user that gave the answer before me. I'm glad that you fixed your issue with user Gustaf Gunér .