title: FontAwsome icon location not displaying correctly on firefox
body: <p>i use FontAwsome icon to put it in a login form, so a user and password icon appear when user enter the sign in form.</p>
  
  <p>the form work correctly with chrome: <a href="http://im85.gulfup.com/4Q9sj9.png" rel="nofollow">http://im85.gulfup.com/4Q9sj9.png</a></p>
  
  <p>but icons appear likes this in firefox: <a href="http://im79.gulfup.com/WFKCvm.png" rel="nofollow">http://im79.gulfup.com/WFKCvm.png</a></p>
  
  <p><strong>html code:</strong></p>
  
  <pre><code> &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content="login panel"&gt;
      &lt;meta name="author" content="WhiteOne"&gt;
  
      &lt;title&gt;Login&lt;/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="css/flatly/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- MetisMenu CSS --&gt;
      &lt;link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="css/sb-admin-2.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom Fonts --&gt;
      &lt;link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- icon location --&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles/icon.css" /&gt;
      &lt;!-- Set Full Background --&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles/background.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="bg"&gt;
          &lt;img src="login-image.jpg" alt="login screen background"&gt;
      &lt;/div&gt;
  
      &lt;div style="margin: 100px auto 0 auto;"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 col-md-offset-4"&gt;
                  &lt;div class="login-panel panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;h3 class="panel-title"&gt;Please Sign In&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;form role="form" method="post" action="checklogin.php"&gt;
                              &lt;fieldset&gt;
                                  &lt;div class="form-group"&gt;
  
                  &lt;span class="usericon"&gt;
                                   &lt;input class="form-control" placeholder="Username" name="username" type="text" autofocus&gt;
                  &lt;/span&gt;
  
                  &lt;/div&gt;
  
  
                                  &lt;div class="form-group"&gt;
                                  &lt;span class="passwordicon"&gt;
                                  &lt;input class="form-control" placeholder="Password" name="password" type="password" value=""&gt;
                                  &lt;/span&gt;
  
                                  &lt;/div&gt;
                                  &lt;div class="checkbox"&gt;
                                      &lt;label&gt;
                                          &lt;input name="remember" type="checkbox" value="Remember Me"&gt;Remember Me
                                      &lt;/label&gt;
                                  &lt;/div&gt;
  
                                  &lt;input type="submit" name="Login" value="Login" class="btn btn-lg btn-success btn-block"&gt;
                              &lt;/fieldset&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- jQuery Version 1.11.0 --&gt;
      &lt;script src="js/jquery-1.11.0.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Metis Menu Plugin JavaScript --&gt;
      &lt;script src="js/plugins/metisMenu/metisMenu.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="js/sb-admin-2.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>css code for icon: icon.css</strong></p>
  
  <pre><code>.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;
  }       
  </code></pre>
  
  <p>aslo when i try to change the css code using developer tools or even from the css file nothing changed in firefox, that somehow strange!
  anyone know how can i solve this problem?</p>