Icon font class don't align when increase font size

67 views Asked by At

I'm using a icon font that i create in http://iconvau.lt/, but when i place text-align center the icon don't get centered. It stays on the left.

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;}
2

There are 2 answers

0
chrisbedoya On

Try setting the icon's margin to auto:

.icon-2 {
    margin: auto;
}
0
Redlight On

I think you should set the margin as AUTO

    .icon-2 
    {
    margin: auto;
            }