Question 43803 in Html Question posted in
Some basic documentation can be found here.

Email icon and key icon is not shown in html form

I’m trying to add icons in a login form (email icon and a password icon) but the icon is not shown instead a rectangle box is shown,

here is the login page:
enter image description here

Code:

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

Note I added the Font Awesome link in the <head>

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

What can be the issue, can you please tell where went wrong and why, Thank you in advance

Tags:

2

Answers


  1. 0

    include both .css and .js font-awesome library in the header works fine
    <link rel="stylesheet" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    and
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"></script>

    Login or Signup to reply.
  2. 0

    – For version 4 –

    Change the HTML:

    fas fa-envelope to fa fa-envelope,

    and fas fa-lock to fa fa-lock.

    And also change the CSS in 2 places:

    font-family: "Font Awesome 5 Free"; to font: normal normal normal 14px/1 FontAwesome;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search