Question

我目前正在尝试使用bootstrap web框架创建一个漂亮的导航栏菜单，我必须使用字体系列图标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

您可以从将line-height设置为某个固定大小开始：

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

将编译类似于css：
的内容

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

修复GlyphIcon和FontAwesome之间的bootstrap差异

2 个答案: