Question

我使用FontAwsome图标将其放入登录表单中，因此当用户输入登录表单时会出现用户和密码图标。

表单正常使用chrome：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中没有任何变化，这有点奇怪！谁知道我怎么能解决这个问题？

Answer 1

我认为以规则的方式打破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中，我看起来很好。

字体真棒图标位置无法在Firefox上正确显示

1 个答案: