Incorporate a font-awesome icon directly within the input field

My div element contains a span element, which in turn includes an i tag. However, the i element extends outside of both the span and div elements.

I am attempting to place an eye icon inside an input field.

Here is my current code - what adjustments should I make?

.fa-eye {
  float: right;
  display: flex;
}

.fa-eye {
  position: absolute;
  z-index: 5;
  display: block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="eye">
  <span>
    <i class="fa fa-eye"></i>
  </span>
  <input placeholder="term">
</div>

htmlcss

Answer №1

After reviewing the feedback provided:

My preference is to include an eye icon in the input field

You have a couple of options to achieve this:

(1) If you would like to utilize a font-awesome icon as a placeholder for the input, you can refer to the Unicode Cheatsheet. Here is an example demonstrating how to implement this:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" class="fa" placeholder="&#xf06e; term">

(2) Alternatively, if you prefer to have a fixed static icon inside the input field, you can consider the following approach:

.input-icon {
  position: absolute;
  left: 3px;
  color: rgb(0, 128, 255);

  /* Vertically center the icon in the input */
  top: calc(50% - 0.5em);
}

#myInput {
  padding-left: 25px;
}

.custom-wrapper {
  position: relative;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 
<div class="custom-wrapper">
  <input type="text" placeholder="term" id="myInput">
  <i class="fa fa-eye input-icon"></i>
</div>

Answer №2

When using position: absolute, it is important to determine which element should be positioned relative. Additionally, you must specify the location where the "child" element will be placed (e.g., left side).

Remember, when working with positions, there is no need to use float: left/right.

Consider the following code snippet:

    .eye{
        position: absolute;
    }
      
      .fa-eye {
        position: relative;
        left: 143px;
        display: flex;
      }
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
   <span >
        <input class="eye" placeholder="term">
        <i class="fa fa-eye"></i>
    </span>

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

Steps to Incorporate Whitespace in a Mailto Link for Generating a Hyperlink

I am currently using Outlook 2007 and I need to include a hyperlink to a website in the body section of an email link. The URL of the site contains spaces. When I try to use %20 to represent the whitespace, it does display as expected but there is an issu ...

htmlmailto

When using a jQuery function, remember to always return false

I'm currently developing a forum and looking to implement client-side form validation. However, I'm unsure about how to validate the form before submission. I've tried using an 'on' function, but I need a way to notify the user if ...

jqueryhtmlcodeigniter

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

javascriptjquerycssbootstrap-table

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

javascriptcssfonts

Strip the CSS styling from an image (the CSS being included in the generated code)

I need to remove the CSS styling from an image, but I can't modify the generated code where it's coming from. My actual code looks like this: <div class="bubble"> <img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png ...

javascripthtmlcss

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

As a beginner in Angular, my goal is to create a feature where: The character count in a label increases as text is entered into a textarea. When the backspace key is pressed, the counter should decrease. If the user attempts to enter more characters tha ...

htmlangular

Creating visuals from written content

I am attempting to transform Y[0] into an image rather than text. Currently, it is only displayed as a plain text link and not as an image. <html> <head> <script type="text/javascript"> function modifyContent(){ var rows=document.g ...

javascripthtml

The Facebook share button on my website is malfunctioning

Could someone please help me figure out why my custom Facebook share button is not functioning properly? When I click the button, the share window fails to appear. I have tested it as an html file on a live web server and have thoroughly reviewed the Faceb ...

javascripthtmlcssfacebookfacebook-graph-api

Designing a Dynamic Page Layout with Flexbox or Grid

I have been attempting to create this specific layout using a grid system. Unfortunately, I have not been successful in achieving the desired result with my current code snippet. Please note: The DOM Structure cannot be altered https://i.stack.imgur.com/b ...

htmlcssflexboxgrid

JavaScript problem with hovering action causing additional buttons to appear

Currently, I am developing a user interface where, upon hovering over an LI element, 2 buttons appear to provide additional functionality - "edit" and "remove". However, I am facing challenges with the mouse hit zones. The mouseover function works effect ...

javascripthtmlcsshovermouseover

The panel header is clickable and overlaps with the header buttons

My panel component includes a header with a title and buttons positioned in the right corner. Currently, the downward arrow (chevron) is used to toggle the expansion/minimization of the panel's contents. When I attempt to make the header clickable to ...

cssangular

Style.css remains invisible to NetBeans

My webapp is built using Servlets and JSP. However, I am currently facing an issue with directing NetBeans to my style.css file. Whenever the stylesheet is placed in WEB-INF or META-INF or even outside them within the Web Pages directory, everything func ...

cssservlets

use ajax to dynamically load a section of the webpage based on filter criteria

I need to implement a search filter using 3 checkboxes. The search results will be displayed in the div with the id=posts_results <div class="checkbox"> <label><input type="checkbox" id="id1" class="typePost" value="En groupe"> ...

javascriptjqueryhtmlajaxdjango

What techniques can I implement using JavaScript or CSS to create a slightly transparent effect on my text?

I am currently developing a website that features changing background images. I am looking to have the text on the site mimic the color of the backgrounds, but not so much that it becomes difficult to read. How can I make the text transparent in this man ...

htmlcsstexttransparent

Is there a way to remove the unwanted code ​ from the client side of my website?

Upon inspecting the source code of a webpage, I noticed an odd character ​ appearing before the <script> tag on the client side. Strangely, this mysterious character is not present anywhere in the server-side PHP file. I attempted removing a ...

phphtmltwitter-bootstrapsyntax

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

javascripthtmlcssimagemobile

Angular's input event fails to trigger for dynamically generated fields when pasted into them

When working with a form that has dynamically generated input fields, I encountered an issue. I needed to display a preview of the input contents on a div while pasting content into the fields. This project is built using Angular 11. Below is my .ts file: ...

htmlangular

What is the best way to create three buttons for selecting various parameters?

I have a code snippet where I want to assign different parameters to each button when clicked. However, despite my logic, the functionality is not working as expected. Can someone help me with the correct syntax? For example, if I click the "Start (Easy) ...

javascripthtmlbutton

Tips on ensuring a <video> element occupies the full height and width of the screen

I am currently working on an Angular 6 project where I am live streaming a user's webcam to an HTML element. My goal is to simulate the experience of capturing a video or photo on a mobile device. However, the size of the video is currently small. I ...

htmlcssangularvideogetusermedia

Creating Vertical Text and Div Blocks using CSS

Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...

htmlcsstextrotation