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上無法正確顯示

回答

相關問題