如何在登录模板周围添加不​​同的图标？

Question

我正在处理正常的登录页面。我想在用户名和密码文本框周围添加不​​同的图标。我在下面添加了一张图片。我正在使用Angular 4开发核心UI模板。

我无法使序列正确。

<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card-group mb-0">
      <div class="card p-4">
    <div class="card-block">
          <h1>Login</h1>
          <p class="text-muted">Sign In to your account</p>
          <form (submit)="loginUser($event)">
          <div class="input-group mb-3">
            <span class="input-group-addon"><i class="icon-user"></i></span>
            <input type="text" class="form-control" placeholder="Username">
          </div>
          <div class="input-group mb-4">
            <span class="input-group-addon"><i class="icon-lock"></i></span>
            <input type="password" class="form-control" placeholder="Password">
          </div>
          <div class="row">
            <div class="col-lg-6">
              <button type="submit" class="btn btn-primary px-4">Login</button>
            </div>
            <div class="col-lg-6 text-right">
              <button type="button" class="btn btn-link px-0">Forgot password?</button>
            </div>
          </div>
          </form>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您只想更改图标，请在此处选择您的图标：

http://fontawesome.io/3.2.1/icons/

只需更改班级

<span class="input-group-addon"> <i class="icon-user"> </i></span> //Here

<span class="input-group-addon"> <i class="icon-lock"> </i></span> // andHere