CODEWITHSUNDEEP
csstwitter-bootstrap-3font-awesome
Cemre Mengü
Cemre Mengü

Reputation: 18754

FontAwesome Icon Buttons are not the same size

I am using fontawesome with my buttons but they are not the same size as shown in the pictures. I have tried fa-fw options but that makes things even worse. Any ideas what I can try ?

enter image description here

enter image description here

<td>
    <a href="@Url.Action("MemberEmployees", "Employees", new { @item.MemberId })"><span title="Personel" class="btn btn-default btn-sm  fa fa-user" /></a>
    <a href="@Url.Action("Index", "Documents",new { @item.MemberId })"><span title="Belgeler" class="btn btn-default btn-sm   glyphicon fa fa-inbox" /></a>
    <a href="@Url.Action("Index", "Logs",new { @item.MemberId })"><span title="Kayıtlar" class="btn btn-default btn-sm glyphicon fa  fa-folder" /></a>
    <a href="@Url.Action("Edit", "Members", new { @item.MemberId })"><span title="Araçlar" class="btn btn-default btn-sm   fa fa-truck" /></a>
    <a href="@Url.Action("Edit", "Members", new { @item.MemberId })"><span title="Güncelle" class="btn btn-default btn-sm  fa fa-pencil" /></a>
    <a class="modal-link" href="@Url.Action("Delete", "Members",new { @item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm  fa fa-trash" /></a>
</td>

Upvotes: 1

Views: 3852

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28457

It's because of the glyphicon classes in your HTML. http://jsfiddle.net/q6bpdsmt/1/

Fixed HTML:

<td>
    <a href="@Url.Action("MemberEmployees", "Employees", new { @item.MemberId })"><span title="Personel" class="btn btn-default btn-sm fa fa-user" /></a>
    <a href="@Url.Action("Index", "Documents",new { @item.MemberId })"><span title="Belgeler" class="btn btn-default btn-sm fa fa-inbox" /></a>
    <a href="@Url.Action("Index", "Logs",new { @item.MemberId })"><span title="Kayıtlar" class="btn btn-default btn-sm fa fa-folder" /></a>
    <a href="@Url.Action("Edit", "Members", new { @item.MemberId })"><span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" /></a>
    <a href="@Url.Action("Edit", "Members", new { @item.MemberId })"><span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" /></a>
    <a class="modal-link" href="@Url.Action("Delete", "Members",new { @item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>

Upvotes: 1

Ruchir Chauhan
Ruchir Chauhan

Reputation: 91

http://fortawesome.github.io/Font-Awesome/examples/

here's the link..To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes. hope this works..

Upvotes: 2

Related Questions