title: How can I make the font-awesome can take the full area of its parent container
body: <p>As you can see the thumbs are over its parent area.
  The UI layout is not acceptable.</p>
  
  <p><img src="https://i.imgur.com/ewPkvcm.png=300x" alt="inline" title="Title"></p>
  
  <p>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?</p>
  
  <p><img src="https://i.imgur.com/eeEKU1K.png=300x" alt="inline" title="Title"></p>
  
  <h1>Parent container</h1>
  
  <pre><code>#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; }
  </code></pre>
  
  <h1>Font-awesome icons appear on the BEFORE attribute</h1>
  
  <pre><code>.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; }
  </code></pre>