Ionic入力テキストがcantに追加されたionicアイコン

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

、私はこの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> 

を含めるように <span>タグを使用しています。この私のコード よう イム変更