FontAwsome图标位置在Firefox上无法正确显示

我使用FontAwsome图标将其放置在登录表单中，因此当用户输入登录表单时会显示用户和密码图标。FontAwsome图标位置在Firefox上无法正确显示

铬形式正常工作：http://im85.gulfup.com/4Q9sj9.png

但图标显示喜欢这个在Firefox：http://im79.gulfup.com/WFKCvm.png

HTML代码：为图标

<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="login panel"> 
    <meta name="author" content="WhiteOne"> 

    <title>Login</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/flatly/bootstrap.min.css" rel="stylesheet"> 

    <!-- MetisMenu CSS --> 
    <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/sb-admin-2.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    <!-- icon location --> 
<link rel="stylesheet" type="text/css" href="styles/icon.css" /> 
    <!-- Set Full Background --> 
<link rel="stylesheet" type="text/css" href="styles/background.css" /> 

</head> 

<body> 
<div id="bg"> 
     <img src="login-image.jpg" alt="login screen background"> 
    </div> 

    <div style="margin: 100px auto 0 auto;"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
       <div class="login-panel panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Please Sign In</h3> 
        </div> 
        <div class="panel-body"> 
         <form role="form" method="post" action="checklogin.php"> 
          <fieldset> 
           <div class="form-group"> 

       <span class="usericon"> 
           <input class="form-control" placeholder="Username" name="username" type="text" autofocus> 
       </span> 

       </div> 


           <div class="form-group"> 
           <span class="passwordicon"> 
           <input class="form-control" placeholder="Password" name="password" type="password" value=""> 
           </span> 

           </div> 
           <div class="checkbox"> 
            <label> 
             <input name="remember" type="checkbox" value="Remember Me">Remember Me 
            </label> 
           </div> 

           <input type="submit" name="Login" value="Login" class="btn btn-lg btn-success btn-block"> 
          </fieldset> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 

    <!-- jQuery Version 1.11.0 --> 
    <script src="js/jquery-1.11.0.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Metis Menu Plugin JavaScript --> 
    <script src="js/plugins/metisMenu/metisMenu.min.js"></script> 

    <!-- Custom Theme JavaScript --> 
    <script src="js/sb-admin-2.js"></script> 

</body> 

</html>

CSS代码：icon.css

.usericon input{ 
    padding-left:25px; 
} 
.usericon:before{ 
    opacity:.8; 
    height:11%; 
    width:25px; 
    display:-webkit-box; 
    -webkit-box-pack:center; 
    -webkit-box-align:center; 
    position: absolute; 
    content:"\f007"; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: 400; 
    pointer-events: none; 
    -webkit-font-smoothing: antialiased; 
}  
.passwordicon input{ 
    padding-left:25px; 
} 
.passwordicon:before{ 
    opacity:.8; 
    height:11%; 
    width:25px; 
    display:-webkit-box; 
    -webkit-box-pack:center; 
    -webkit-box-align:center; 
    position: absolute; 
    content:"\f023"; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: 400; 
    pointer-events: none; 
    -webkit-font-smoothing: antialiased; 
}

以及当我尝试使用开发人员工具或甚至从CSS文件更改CSS代码没有任何更改在Firefox中，不知何故奇怪！有谁知道我该如何解决这个问题？

来源

2014-10-09 WhiteOne

出于好奇，你为什么要为FontAwesome编写自己的CSS，而不是仅仅使用FontAwesome CSS约定？就像''？ – Pointy 2014-10-09 14:45:35

你也明白Firefox不会关注任何'-webkit' CSS属性或属性值，对吧？ – Pointy 2014-10-09 14:46:00

@Pointy 在用户名占位符前未正确显示图标。在我去这个解决方案之前，我尝试了它。 – WhiteOne 2014-10-09 14:50:40

我认为按照规则打破FontAwesome封装是一个坏主意。您可以定位常规<i>元素，并得到你想要的结果：

<span class=usericon> 
    <i class="fa fa-user"></i> 
    <input> 
</span>

从你的简化，但同样的想法。 CSS：

.usericon { 
    padding: 1px 5px; 
    position: relative; 
    display: inline-block; 
} 

.usericon i { 
    position: absolute; 
    top: 4px; left: 10px; 
} 

.usericon input { 
    border: 1px solid #bbb; 
    border-radius: 5px; 
    padding: 2px 2px 2px 20px; 
    width: 15em; 
}

Here's the CodePen for it.在Firefox和Chrome中，这看起来都很好。

来源

2014-10-09 16:17:26 Pointy

现在感谢它工作得很好:)但是请你能向我解释什么.usericon input {}和.usericon {}是做什么的？因为当我改变这两个区块的任何值时什么也没有发生。 – WhiteOne 2014-10-09 16:33:18

@WhiteOne'.usericon'规则适用于周围的''标签。我主要给了它一些填充，以便在测试中更容易看到;你可以随心所欲调整它。'position：relative'使''的'position：absolute'相对于那个盒子。我还将其设置为“display：inline-block”，以便在布局中更轻松地进行工作。 “.usericon输入”规则适用于“”元素。 – Pointy 2014-10-09 16:50:41

+0

好吧得到它:)所以当我在输入标记之前关闭span标记时，不需要添加.usericon输入块，因为它不会执行任何操作。再次感谢：） – WhiteOne 2014-10-09 17:09:52

FontAwsome图标位置在Firefox上无法正确显示

回答

相关问题