CODEWITHSUNDEEP
bootstrap-4
Bijitashya Birinchi
Bijitashya Birinchi

Reputation: 91

Bootstrap4 input-group-addon issue

As it can be seen from the screenshot I attached fa icon in input-group-addon is not working. Any suggestions how it can be fixed?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-user"></i></span>
      <input type="text" class="form-control" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
      <textarea class="form-control" placeholder="Message" rows="5"></textarea>
    </div>
  </div>
  <input type="submit" value="Submit" class="btn btn-primary btn-block btn-lg">
</form>

enter image description here

Upvotes: 2

Views: 3426

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

The classes have changed in the latest 4.0.0...

https://www.codeply.com/go/EnCJUbqs0g

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <div class="input-group-prepend"><i class="input-group-text fa fa-user"></i></div>
      <input type="text" class="form-control" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-prepend"><i class="input-group-text fa fa-envelope"></i></span>
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-prepend"><i class="input-group-text fa fa-pencil"></i></span>
      <textarea class="form-control" placeholder="Message" rows="5"></textarea>
    </div>
  </div>
  <input type="submit" value="Submit" class="btn btn-primary btn-block btn-lg">
</form>

Upvotes: 6

Related Questions