Form with Icons

By Christine Siu

F6
#
icons form register button input-group input labels
How do I use This?

A fun form with icon labels.

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

<form>
  <div class="form-icons">
    <h4>Register for an account</h4>

    <div class="input-group">
      <span class="input-group-label">
        <i class="fa fa-user"></i>
      </span>
      <input class="input-group-field" type="text" placeholder="Full name">
    </div>

    <div class="input-group">
      <span class="input-group-label">
        <i class="fa fa-envelope"></i>
      </span>
      <input class="input-group-field" type="text" placeholder="Email">
    </div>

    <div class="input-group">
      <span class="input-group-label">
        <i class="fa fa-key"></i>
      </span>
      <input class="input-group-field" type="text" placeholder="Password">
    </div>
  </div>

  <button class="button expanded">Sign Up</button>
</form>


form {
  .form-icons {
    text-align: center;

    h4 {
      margin-bottom: 1rem;
    }

    .input-group-label {
      background-color: $primary-color;
      border-color: $primary-color;
    }

    .input-group-field {
      border-color: $primary-color;
    }

    .fa {
      color: white;
      width: 1rem; // makes the width of icon labels equal
    }
  }
}



form .form-icons {
  text-align: center;
}

form .form-icons h4 {
  margin-bottom: 1rem;
}

form .form-icons .input-group-label {
  background-color: #1779ba;
  border-color: #1779ba;
}

form .form-icons .input-group-field {
  border-color: #1779ba;
}

form .form-icons .fa {
  color: white;
  width: 1rem;
}
JS

Similar Building Blocks

forms

Mobile App Message Bar

F6
by Rafi
forms

Translucent Form Overlay

F6
by Kevin
forms

Input Number Incrementer

F6
by Rafi