title: Center icon inside ul li a
body: <p>I am styling a ul so that I can make a menu that sits on the left side. They will basically be square boxes with icons (using ionicons). The only problem I run into is, I can't get a perfect square and cannot center the icons. Here is what I have now. </p>
  
  <pre><code>.menu_simple ul {
      margin: 0;
      padding: 100px 0 0 0;
      width:185px;
      list-style-type: none;
      position: fixed;
      font-size: 60px;
  }
  .menu_simple ul li a {
      text-decoration: none;
      color: white;
      padding: 10.5px 60px;
      background-color: #F0541E;
      display:block; width: 120px; height: 120px;
      vertical-align: middle;
  }
  .menu_simple ul li a:visited {
      color: white;
  }
  
  .menu_simple ul li a:hover, .menu_simple ul li .current {
      color: white;
      background-color: #d84b1b
  ;
  }
  </code></pre>
  
  <p>Also, the html I am currently using looks is this:</p>
  
  <pre><code>    &lt;div class="menu_simple"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;i class="ion-ios-person-outline" style="color:#FFFFFF;" href="#"&gt;&lt;/i&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="ion-ios-baseball-outline" style="color:#FFFFFF;" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="ion-ios-calendar-outline" style="color:#FFFFFF;" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="ion-ios-plus" style="color:#FFFFFF;" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="ion-log-out" style="color:#FFFFFF;" href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>It currently looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/KcOzq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KcOzq.png" alt="enter image description here"></a></p>