What is the process for inserting fa fa icons within a text input field?

Struggling to place a fa fa icon inside an input text box for my Angular 4 project. Despite trying various solutions from Stack Overflow, none have proven successful. Here is the code I have attempted:

<div class="form-group has-feedback">
<input class="form-control " name="UserName" type="text" placeholder="username"><span class="fa fa-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input class="form-control " name="PassWord" type="password" placeholder="password"><span class="fa fa-lock form-control-feedback"></span>

The current output looks like this:

My goal is to have icons displayed within the text box:

cssangularbootstrap-4font-awesome

Answer №1

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
<input style="position:relative;" class="form-control "  name="UserName"  type="text"   placeholder="username" >
<span style="position:absolute; right:8px;top:8px;" class="fa fa-user "></span>
 </div>
 <div class="form-group has-feedback">
 <input class="form-control " style="position:relative;"  name="PassWord"  type="password" placeholder="password"><span style="position:absolute; right:8px;top:60px;" class="fa fa-lock form-control-feedback"></span>
 </div>

Answer №2

  input[type=text]{
    width:100%;
    border:2px solid #aaa;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
  }
  
  input[type=text]:focus{
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
  }
  
  .inputWithIcon input[type=text]{
    padding-left:40px;
  }
  
  .inputWithIcon{
    position:relative;
  }
  
  .inputWithIcon i{
    position:absolute;
    left:0;
    top:8px;
    padding:9px 8px;
    color:#aaa;
    transition:.3s;
  }
  
  .inputWithIcon input[type=text]:focus + i{
    color:dodgerBlue;
  }
  
  .inputWithIcon.inputIconBg i{
    background-color:#aaa;
    color:#fff;
    padding:9px 4px;
    border-radius:4px 0 0 4px;
  }
  
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="inputWithIcon">
<input type="text">

  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i></div>
<div class="inputWithIcon">
<input type="text">

  <i class="fa fa-lock fa-lg fa-fw" aria-hidden="true"></i></div>

Answer №3

Utilize position:absolute for the fa class

span.fa {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.form-group {
    position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<div class="container">
 <div class="form-group has-feedback">
    <input class="form-control "  name="UserName"  type="text"   placeholder="username"><span class="fa fa-user form-control-feedback"></span>
     </div>
     <div class="form-group has-feedback">
     <input class="form-control "  name="PassWord"  type="password" placeholder="password"><span class="fa fa-lock form-control-feedback"></span>
     </div> 
    
</div>

Answer №4

Include the <i class="..."> tag in your HTML:

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>

  1. method

Link to example code on CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining child component references in Angular using @ViewChildren

Currently, I am generating several ModuleItemComponents by utilizing the following Angular syntax: <div #moduleItems *ngFor="let module of seriesItem.modules; let i = index"> <app-module-item [videoModule]="module" >< ...

angularviewchildren

Display modal when button in table row is clicked

I am currently using the Next Angular 8 Free Admin Template and I am looking to display a modal when the button in a specific data table row is clicked. Below is the code snippet: HTML Code: <div class="col-sm-12"> <app-card cardTi ...

angulardatatabledatatablesangular8angular-datatables

How can I prevent zooming functions in a responsive design layout?

Is there a method to prevent zoom-in and zoom-out functionality on responsive design pages for iPad, iPhone, or other smartphones? Are there any techniques available to restrict this capability? ...

htmlcssresponsive-designmeta-tags

To concentrate on a specific element that houses a user input

Can someone explain how to enable focus on a my-input component from the library when clicking on a span element? <div> <span (click)="onClickHandler();></span> <my-input #myinput></my-input> </div> I have tried ...

angularfocus

Display JSON information in a tabular format

I am trying to populate a table with data from an API response, but I am facing issues printing the data. Specifically, I need to match the "IdLangage" value with the correct cell in the table and display the corresponding translation. The JSON data format ...

jsonangular

overrule styling in react native

In React Native, I am looking to modify a specific style within a sub-component. For instance, I have defined a style called CircleShapeView: const styles = StyleSheet.create({ CircleShapeView: { width: 50, height: 50, borde ...

cssreactjsreact-nativestylesheet

What could be causing my bootstrap navbar button to hide the navigation items on mobile devices?

While working on creating a bootstrap navbar, I encountered a slight issue. I had referred to the code provided on this site to implement it. Everything seemed to be functioning well – the navigation items showed up, and the navbar collapsed appropriatel ...

bootstrap-4navbar

Difficulty in centering two equal-sized columns in a Bootstrap 3 row with an offset

Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/ I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row. The desired effect is to center both of these columns inside the .row, ensuring ...

htmlcsstwitter-bootstrap

Angular - Customizing button bindings for various functions

As a newcomer to Angular and TypeScript, I am faced with the task of creating a customizable button that can display text, an icon, or both. For example: button-icon-text-component.html <button> TEST BUTTON </button> app.component.html & ...

htmlangulartypescriptcomponentsfrontend

What issue could be causing trouble with my JavaScript animation?

Currently, I am working on designing a web-page and I have a specific vision in mind - I want an image of the moon to slowly rise up from the bottom of the screen to the top. Here's the HTML code that I have so far: <body> <div id="Moon" ...

javascripthtmlcssanimation

Splitting Sub Menu into 2 Columns in Wordpress Twenty Seventeen Theme

I'm currently using the Twenty Seventeen theme on my WordPress site. My issue lies with trying to arrange my sub-menu items into 2 columns, as I have multiple items nested under one of my main menu options. After attempting to add the following code ...

csswordpresssubmenu

Exploring the endless possibilities of combining Theme Bootstrap with Jhipster

Is it feasible to incorporate an external bootstrap theme (obtained from themeforest.net) into Jhipster? If so, what is the recommended approach to accomplish this? Thank you ...

bootstrap-4jhipster

Finishing a division by both clicking outside of it and pressing a button

I am currently working on setting up a dropdown menu that can be closed both by clicking outside the opened div and by clicking the button or image that opens the div. Image with onclick function: <img onclick="hide()" id="menu" src="...."> Th ...

javascriptjquerycssonclickaddeventlistener

A guide on how to follow a specific item in an Angular 2 store

I have integrated ngrx store into my Angular2 application. The store reducer contains two objects as shown below: export function loadSuccessNamesAction(state: StoreData, action: loadSuccessNamesAction): StoreData { const namesDataState = Object.assi ...

angulartypescriptrxjsngrx-store

Guide to deploying Angular 17 in server-side rendering mode on Firebase

I've been delving into this issue for the past week, but still haven't found a definitive solution. I created an Angular 17 project in server-side rendering mode, installed Firebase via npm, built the project, used 'firebase init hosting&apo ...

angularfirebase

Link the same CSS file with multiple HTML pages

Currently, I am in the process of creating an external CSS file specifically for my homepage. The only issue I am encountering is that while I know how to resolve this problem for one HTML page, I am uncertain about how to address it for other pages. For ...

htmlcss

The z-index property does not seem to function properly when used in conjunction

I am experiencing an issue with the z-indexes of two divs: one with default positioning and the other with a fixed position. No matter how I adjust the z-index values, it appears impossible to make the fixed-positioned element go behind the statically pos ...

cssz-index

Discussing the Application of Rules for Tables within Block Elements

Could someone provide an explanation as to why the div with the red border is not expanding? <body style="padding:200px"> <div style="border:1px solid red"> <table> <tr> <i ...

css

Is there a way for me to tweak the images on my website in a particular way?

Here’s the situation with my website: I have two images displayed: a border (image on the right) and a photograph (on the left). I am trying to place the photographic image inside the bordered image. Just to clarify, I can't create a new border as ...

htmlcss

Issues with the width of Table TD cells not being responsive

I'm having trouble adjusting the width of my dropdown menu columns. I've tried various methods, but can't seem to get each column to be 200px wide as desired. .dropbtn { background-image: url("../sliki/meni.png"); width: 220px; heig ...

htmlcss