Question

奇怪的问题......已经在Safari，Opera，FF，IE中测试过，一切看起来都很好 - 第一次说实话我单独使用Chrome时遇到了问题！

基金会6框架。

在我的顶级导航中，一个项目具有背景和字体真棒图标。

有什么想法吗？提前谢谢了。

HTML：

＆＃13;

<div class="title-bar">
    <div class="title-bar-left">
        <span class="title-bar-title"><img src="{$ThemeDir}/images/logoNav.png" alt="$SiteConfig.Title"/></span>
    </div>
    <div class="title-bar-right">
        <ul class="large-horizontal main-menu">
            <% loop Menu(1) %>
            <li class="menu-item<% if $LinkingMode == "current" || $LinkingMode == "section" %> active<% end_if %>">
                <a href="$Link" title="Go to $Title.ATT">$MenuTitle</a>
                <% if $Children %>
                <ul class="sub-menu">
                    <% loop $Children %>
                    <li class="<% if $LinkingMode == "current" || $LinkingMode == "section" %>active<% end_if %>">
                        <a href="$Link" title="Go to $Title.ATT"> $MenuTitle</a>
                    </li>
                    <% end_loop %>
                </ul>
                <% end_if %>
            </li>
            <% end_loop %>
            <li class="menu-item client-login"><a href="#" class="client-login-button" title="Go go Client Login">Client Login <i class="fa fa-users"></i></a></li>
        </ul>

        <button class="menu-icon" type="button" data-open="offCanvas"></button>
    </div>
</div>

＆＃13;

SASS：

＆＃13;

// custom menu button

li.menu-item.client-login{
	position: relative;
	background-color: rgba(8,79,123,0.7);
	-webkit-box-shadow: 1px 1px 3px 0 #3b3b3b;
	padding: 1.2rem;
	padding-top: 5rem;
	box-shadow: 1px 1px 3px 0 #3b3b3b;
	border-radius: 0 0 0.5rem 0.5rem;
	@include transition(background-color 0.3s ease);
	&:hover{
		background-color: rgba(8,79,123,1);
	}

	a{
		color: #fff;
		font-weight: 600;
	}
}

.main-menu li.menu-item.client-login a{

	color: $white;
	font-weight: 600;
	&:hover{
		color:$white;
	}	
	
}

＆＃13;

Answer 1

找到答案：

字体真棒在i元素上有display:inline-block;。

只需要display:inline;的简单覆盖

Answer 2

使用CDN而不是将该文件本地存储到您的项目中，并确保在fontawesome CDN之前将jquery包含到项目中

Chrome问题：字体很棒，可以打破填充

2 个答案: