Question

我正在创建Ionic-3登录页面，它工作正常，但我有一些问题，我尝试将我的输入文本添加到图标，但它不能添加，如何正确添加文本文件的图标，看看我的附图，你可以理解我的问题

图标

<ion-icon ios="ios-lock" md="md-lock"></ion-icon>

      <ion-row>
        <ion-col>
          <ion-list inset>

            <ion-item><ion-icon ios="ios-lock" md="md-lock"></ion-icon>
              <ion-input type="text" placeholder="User Name" name="username"  [(ngModel)]="userName" required></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="password" required></ion-input>
            </ion-item>

          </ion-list>
        </ion-col>
      </ion-row>
    <div class="col-md-3">
      <div class="form-control-feedback" text-center>
                        <span class="text-center align-middle" style="color: red">
                            <i class="fa fa-close"></i> {{errorMessage}}
                        </span>
      </div>
    </div>
      <ion-row>
        <ion-col class="signup-col">
          <button ion-button class="submit-btn" full (click)="signIn()">Login</button>
          <!--<button ion-button class="register-btn" block clear (click)="createAccount()">Create New Account</button>-->
        </ion-col>
      </ion-row>


  </div>

CSS

page-userlogin {
  .login-content {
    background: #a88871;

    .logo-row {
      padding-top: 50px;
      padding-bottom: 20px;
    }

    .login-box {
      background:none;
      padding: 20px 20px 0px 20px;
      margin-top: 30px;
      margin-left: 0.5rem;
    }

    ion-row {
      align-items: center;
      text-align: center;
    }

    ion-item {
      margin-left: -0.1rem;
      border-radius: 8px !important;
      padding-left: 30px !important;
      font-size: 0.9em;
      margin-bottom: 10px;
      border: 1px solid #ffffff;
      border-bottom: 0px !important;
      box-shadow: none !important;
    }

    .signup-col {
      margin: 0px 16px 0px 16px;
      padding-bottom: 20px;
    }

    .item-inner {
      border-bottom-color: #ffffff !important;
      box-shadow: none !important;
    }

    .submit-btn {
      background: #a57958;
      border-radius: 8px !important;
      border: 1px solid #ffffff;
    }

    .register-btn {
      color: #ffffff;
      font-size: 0.8em;
    }
  }

Answer 1

我解决了我的问题，我改变了我的代码我使用<span>标记来包含此icon

 <span  item-left><ion-icon name="person"></ion-icon> </span>

 <ion-list inset>

            <ion-item>   <span  item-left><ion-icon name="person"></ion-icon> </span>
              <ion-input type="text" placeholder="User Name" name="username"  [(ngModel)]="userName" required></ion-input>
            </ion-item>

离子输入文本提交给cant添加了离子图标

1 个答案: