css - フォント サイズを大きくするとアイコン フォント クラスが整列しない

Question

http://iconvau.lt/で作成したアイコン フォントを使用していますが、text-align を中央に配置すると、アイコンが中央に配置されません。左側のままです。

html

<ul>
  <li class="col-md-2">
   <div class="icon-2"></div>
  </li>
</ul>

css:
       ul{ width: 200px; text-align: center; height: 200px;}
       li {background: #fff;}
      .icon-2:before {
           content: "\f104"; text-align: center; font-family: "iconvault";
           font-style: normal;
           font-weight: normal;
           font-variant: normal;
           text-transform: none;
           line-height: 1;
           -webkit-font-smoothing: antialiased;
           display: inline-block;
           text-decoration: inherit;
           color: #1b93b6;}

Answer 1

アイコンの余白を自動に設定してみてください:

.icon-2 {
    margin: auto;
}

Answer 2

マージンをAUTOに設定する必要があると思います

    .icon-2 
    {
    margin: auto;
            }