Fix bootstrap differences betwen GlyphIcon and FontAwesome

Question

I currently trying to create a nice navbar menu using bootstrap web framework and I have to use both font family icons GlyphIcon and FontAwesome but my problem is that the icons are not created with the same size and I have differences between FontAwesome and GlyphIcons, does someone know a fix for this problem ?

Here is a small fiddle, hover over menu to see the differences:

.navbar-default{background:#B9DBF7; border-color: #000;}

.navbar-default .navbar-nav > li > a{font-size: 20px;}

.navbar-default .navbar-nav > li >a:hover{ padding-bottom: 12px; border-bottom:4px solid red;}

Answer 1

You can use their prefixes ("fa" and "glyphicon") to set them a same size because there is a difference by default between glyphicon and fontawesome so try this:

Less:

  .navbar-nav {
    > li > a {
      [class*="fa-"], [class*="glyphicon-"]{
          font-size:16px;
      }

 //your custom less/css

      &:hover,
      &:focus {

 //your custom less/css
      }
    }
}

which will compile something like in css:

.navbar-nav > li > a [class*="fa-"],
.navbar-nav > li > a [class*="glyphicon-"] {
  font-size: 16px;
}