Form with Icons

By Christine Siu

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;
}

Form with Icons

By Christine Siu

Mobile App Message Bar

Translucent Form Overlay

Input Number Incrementer

Form with Icons

By Christine Siu

Similar Building Blocks

Mobile App Message Bar

Translucent Form Overlay

Input Number Incrementer