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

代码：

.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">

可能是什么问题，你能告诉哪里出了问题，为什么，谢谢你提前

2条答案

按热度按时间

w1jd8yoj1#

包括两个.css和.js字体-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>

赞(0）回复(0）举报 2023-03-20

cngwdvgl2#

更改HTML：
fas fa-envelope到fa fa-envelope，
以及fas fa-lock至fa fa-lock。
并在两个地方更改CSS：
font-family: "Font Awesome 5 Free";至font: normal normal normal 14px/1 FontAwesome;

css 电子邮件图标和按键图标不以html形式显示

2条答案

相关问题

热门标签

最新问答