css - FontAwesome Icons disturbs pixel during transformation -
i using fontawesome icons in application on tree structure list. fa-caret-down , fa-caret-right disturbs pixel on right dow moves content right 5 pixels during change fa-caret-right fa-caret-down.
here html code:
<i class="fa fa-caret-down"></i>
css:
.fa { display: inline-block; font: normal normal normal 14px/1 fontawesome; /*font-size: inherit;*/ text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } .fa-caret-right:before { content: "\f0da"; } .fa-caret-down:before { content: "\f0d7"; }
font awesome has fix this.
fixed width icons
use fa-fw set icons @ fixed width. great use when different icon widths throw off alignment. useful in things nav lists & list groups.
here can find information on different font awesome features.
ul { list-style:none; }
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <li> <span class="fa fa-caret-down fa-fw"></span> fruit <ul> <li>apple</li> <li>orange</li> <li>apple</li> </ul> </li> <li> <span class="fa fa-caret-right fa-fw"></span> animals <ul> <li>monkey</li> <li>dog</li> <li>cat</li> </ul> </li> </ul>
Comments
Post a Comment