title: How can I align my icon to be in center of my square box?
body: <p>I'm trying to <strong>align</strong> my icon inside a square div to have both properties: <strong>CENTER</strong> + <strong>MIDDLE</strong></p>
  
  <p>This is what I hope to get : </p>
  
  <p><img src="https://i.stack.imgur.com/p0mte.png" alt="enter image description here"></p>
  
  <p>I have tried this on my CSS : </p>
  
  <pre><code>/* Slick Settings */
  
    .slick-next {
      right: 0px;
      border: 1px solid black;
      width:35px;
      height:35px;
      padding: 5px;
      display:table;
      text-align: center;
    }
  
    .slick-prev {
      left: 360px;
      border: 1px solid black;
      width:35px;
      height:35px;
      padding: 5px;
      display:table;
      text-align: center;
    }
  
    .slick-next:before {
      font-family: FontAwesome;
      content:"\f105";
      color:black;
      display: table-cell;
      vertical-align: middle;
      left: 50%;
    }
  
    .slick-prev:before {
      font-family: FontAwesome;
      content:"\f104";
      color:black;
      display: table-cell;
      vertical-align: middle;
      left: 50%;
    }
  </code></pre>
  
  <p>This is what I produce : </p>
  
  <p><img src="https://i.stack.imgur.com/4xFoI.png" alt="enter image description here"></p>
  
  <p>Can someone help me with this ? </p>
  
  <p>Feel free to suggest me if you have any other better way of archieving this.</p>
  
  <p>Thanks in advance.</p>