电子邮件图标和钥匙图标未以 html 形式显示

Question

我尝试在登录表单上添加图标（电子邮件图标和密码图标），但未显示该图标，而是显示一个矩形框。

这是登录页面：

代码：

.email-password-boxes {
  display: flex;
  flex-direction: column;
}

.email-box,
.password-box {
  position: relative;
  background-color: #F9F9F9;
  border-radius: 5px;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.email-box input[type="email"],
.password-box input[type="password"] {
  background-color: transparent;
  border: none;
  height: 40px;
  padding-left: 40px;
  border-radius: 5px;
  font-size: 16px;
}

.email-box input[type="email"]:focus,
.password-box input[type="password"]:focus {
  outline: none;
  border-color: #FFB6C1;
}

.email-box input[type="email"]::-moz-placeholder,
.password-box input[type="password"]::-moz-placeholder {
  font-size: 16px;
}

.email-box input[type="email"]::placeholder,
.password-box input[type="password"]::placeholder {
  font-size: 16px;
}

.email-box::before {
  /* Position and size the icon */
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  /* Set the icon content using Font Awesome classes */
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* Set the color of the icon */
  color: #ab5684;
  /* Set the z-index to position the icon behind the input */
  z-index: 1;
}

.password-box::before {
  /* Position and size the icon */
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  /* Set the icon content using Font Awesome classes */
  content: "\f084";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* Set the color of the icon */
  color: #ab5684;
  /* Set the z-index to position the icon behind the input */
  z-index: 1;
}

@media (max-width: 1023px) {
  .email-box input[type="email"],
  .password-box input[type="password"] {
    padding-left: 10px;
    width: 100%;
    height: 50px;
    right: 0;
  }
}

.email-box+.password-box {
  margin-top: 10px;
}

.email-box label,
.password-box label {
  font-size: 16px;
}

.email-box label[for="user_email"]::after,
.password-box label[for="user_password"]::after {
  content: "*";
  color: red;
  font-size: 16px;
}

.submit-button {
  background-color: #FFB6C1;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #FFA5B5;
}

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <form>
    <div class="email-password-boxes">
      <div class="email-box">
        <label for="user_email">Email</label>
        <input id="user_email" name="email" type="email" placeholder="Enter your email" required>
        <i class="fas fa-envelope"></i>
      </div>
      <div class="password-box">
        <label for="user_password">Password</label>
        <input id="user_password" name="password" type="password" placeholder="Enter your password" required>
        <i class="fas fa-lock"></i>
      </div>
    </div>

    <button type="submit" class="submit-button">Submit</button>
  </form>
</body>
</html>

注意我在

<head>

中添加了 Font Awesome 链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

可能是什么问题，您能告诉我哪里出了问题以及为什么吗？

Answer 1

- 对于版本 4 -

更改 HTML：

fas fa-envelope

至

fa fa-envelope

,

和

fas fa-lock

到

fa fa-lock

。

并且还更改了 2 个地方的 CSS：

font-family: "Font Awesome 5 Free";

至

font: normal normal normal 14px/1 FontAwesome;

Answer 2

在标头中包含 .css 和 .js font-awesome 库效果很好

<link rel="stylesheet" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

和

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"></script>

电子邮件图标和钥匙图标未以 html 形式显示

问题描述投票：0回答：2

2个回答

最新问题

电子邮件图标和钥匙图标未以 html 形式显示

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2