Исправить различия в начальной загрузке между GlyphIcon и FontAwesome

Question

В настоящее время я пытаюсь создать красивое меню панели навигации с помощью веб-фрейма начальной загрузки, и мне приходится использовать иконки семейств шрифтов GlyphIcon и FontAwesome, но моя проблема заключается в том, что значки создаются не одинакового размера, и у меня есть различия между FontAwesome и GlyphIcons, кто-то делает знаете решение этой проблемы?

Вот небольшая скрипка, наведите курсор на меню, чтобы увидеть различия:

.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

Вы можете использовать их префиксы ("fa" and "glyphicon") чтобы установить их одинакового размера, потому что по умолчанию есть разница между глификоном и fontawesome, поэтому попробуйте это:

Less:

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

 //your custom less/css

      &:hover,
      &:focus {

 //your custom less/css
      }
    }
}

который скомпилирует что-то вроде в css:

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

Answer 2

Вы можете начать с установки высоты строки до некоторого фиксированного размера:

body{padding:40px;}

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

.navbar-default .navbar-nav > li > a{font-size: 20px; padding-top: 4px; padding-bottom: 4px; line-height: 42px;}

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

http://jsfiddle.net/ZurAk/257/