Fox bootstrap GlyphIcon 和 Font Awesome 的区别

Question

我目前正在尝试使用 bootstrap 网络框架创建一个漂亮的导航栏菜单，我必须同时使用字体系列图标 GlyphIcon 和 FontAwesome，但我的问题是图标的大小不同，我FontAwesome 和 GlyphIcons 之间存在差异，有人知道解决此问题的方法吗？

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

您可以先将行高设置为某个固定大小：

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/

Answer 2

您可以使用它们的前缀 ("fa" and "glyphicon") 将它们设置为相同的大小，因为默认情况下 glyphicon 和 fontawesome 之间存在差异，所以试试这个：

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

Fox bootstrap GlyphIcon 和 Font Awesome 的区别

Fix bootstrap differences betwen GlyphIcon and FontAwesome

twitter-bootstrap

font-awesome

glyphicons