Tips for emphasizing the prepend Font Awesome icon in Bootstrap 4 or Bootstrap-vue

Having an issue similar to this:

https://i.sstatic.net/upjfK.png

How can I adjust the width of the border so that it covers the icon on the left as shown here:

https://i.sstatic.net/LSuOE.png

This is my HTML:

.input-group-text {
  width: 48px;
  border-right: none;
  background-color: #ffffff;
}
[class^="fa-"], [class*=" fa-"] {
  display: inline-block;
  width: 100%;
}
.LoginInput {
  border-left: none;
  position: relative;
}
<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
  </b-input-group-prepend>
  <b-form-input class="LoginInput" size="lg" placeholder="Username">
  </b-form-input>
</b-input-group>

<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
  </b-input-group-prepend>
    <b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
    </b-form-input>
</b-input-group>

htmlcssbootstrap-4bootstrap-vue

Answer №1

Check out a great demo I discovered by James Barnett that showcases the use of font awesome icons with CSS to achieve the desired effect using position: absolute; on the icon and text indent. He cleverly places both the icon and input field within a container div.

Here's how you can implement it:

<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

To style it, you can use the following CSS:

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css");
  body { margin: 30px; }

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
 }

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input { text-indent: 32px;}
.search .fa-search { 
  position: absolute;
  top: 10px;
  left: 10px;
}

You can find more information in the full thread here.

I hope this solution is helpful to you!

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

Maintaining consistent height across all elements in a column while preserving margin: a guide

My query revolves around filling the contents of two columns with different heights within a row. Although the columns themselves are of equal height, the cards inside them are not. +---------------------------+---------------------------+ | +------------- ...

htmlcssbootstrap-5

Why is my card not laying flat in a horizontal position?

Could you please assist with aligning the cards horizontally in a row instead of vertically? I would like to have 3 cards in one row. Thank you. <div class="container"> <div class="row"> <div class="col-md-4"> <di ...

htmlbootstrap-5bootstrap-cards

How to showcase two items using a for loop in Django

In the template I am working on, there is a timeline structure where one object is left aligned and the other is right aligned. I am looking for a way to display them alternately within a for loop. The content comes from the same model but the alignments o ...

pythonhtmldjango

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

javascripthtmlcss

Facing compilation errors in Sass due to grid issues

@media (min-width: 40em) { .article__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .article__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); ...

cssvisual-studio-codesassgrid

The CSS modifications are only visible in my browser after I delete the browsing data

After setting up a landing page with simple text in the center of the screen using flex, I encountered an issue. Whenever I made changes to the CSS, they would not reflect in my browser unless I cleared the browsing data (history, cookies, etc). This probl ...

htmlcssflexboxflex3

Events triggered when a Jquery checkbox is toggled between checked and unchecked

I have written some HTML code that utilizes jQuery to manage checkboxes. <tr> <td> <div class="checkbox"> <label><input type="checkbox" id="checkbox2"></label> </div> </td> & ...

javascriptjqueryhtmlcssjquery-plugins

What causes AngularJS (ng-repeat) to permit the addition of duplicate records initially when the input array values are of integer types?

Snippet 1: If you execute the code below, duplicate records cannot be added. var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["1", "2", "3"]; $scope.addItem = function() { $scope.pr ...

javascripthtmlarraysangularjsangularjs-ng-repeat

divide a JSON list

Within this JSON array, there is a plethora of person data, each with their own specified type such as "hr" or "accounting". The structure of the JSON array is depicted below: { "0": { "id": "2", "name": "blabla", "type": "hr" ...

javascriptjqueryhtmljson

Achieving alignment of header text and body text on the same line

I am dealing with a formatting issue where the first item in my paragraphs is not lining up properly. Here is an example of the problem: Header waspeen: 3304.07 ananas: 24 appel: 3962.0 Header waspeen: 3304.07 ananas: 30 appel: 3962.0 Does anyone k ...

htmlcss

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

Where can I locate a specific child element in this scenario?

Currently, I am exploring the possibilities of integrating AngularJS into my application and have encountered a question regarding the click event implementation. Within my HTML code: <div ng-click='clickMe()' ng-controller='testCtrl&ap ...

javascriptjqueryhtmlcssangularjs

JavaScript countdown timers should maintain their progress even after the page is reloaded

I am encountering an issue with a timer on my checkout page. We have a 2-step checkout process, and after completing step 1, the webpage reloads to step 2, causing the timer to restart. I need the timer to continue counting without resetting. Below is the ...

javascripthtml

I am attempting to update the background image pattern every time the page refreshes. Despite trying numerous codes, I have not been able to achieve the

Here is my code that I've been struggling with. I am trying to change the image on page refresh, but it's not working as expected. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/1.png' ...

javascriptphpcss

Writing and altering content within the <code> element in Chrome is unreliable

Utilizing a WYSIWYG Editor with contenteditable functionality allows users to input "code snippets" using a <code> element. Here is an example: <div contenteditable="true"> <p> This is a paragraph with an <code>inline s ...

javascripthtmlcsscontenteditable

Incorporating SASS/SCSS syntax within the <style> element

Can I include SASS/SCSS syntax directly in an .html file within a style tag? I'm interested in defining a variable within the .html file and then utilizing it in a .sass file. ...

htmlcsssass

Emphasize specific letters in a word by making them bold, according to the user

In my app, there is a search feature that filters data based on user input and displays a list of matching results. I am trying to make the text that was searched by the user appear bold in the filtered data. For example, if the user searches 'Jo&apos ...

javascripthtmlcssreactjs

Showing a JSON file in an HTML page

I've been attempting to showcase a local JSON file on an HTML page. I stumbled upon some information online, but it's causing me quite a bit of confusion. Here is the JSON file I have: { "activities": [ { "name": "C:&bs ...

javascripthtmljson

Using Compatibility Mode in IE8 causes pages to become distorted and spread out

Recently, I encountered an issue with my web page that I created primarily using HTML. Everything looked great when running it from Visual Studio 2008, but once published, IE8's compatibility mode distorted the layout. Previously, my page had spacing ...

htmlinternet-explorer-8

Enhancing an image with a hover-activated overlay

I'm trying to enhance the setup of my page with three images in columns by adding an extra overlay on top of the main image but beneath the hover effects. However, I seem to be encountering some difficulties while working on it. Take a look at my cod ...

htmlcssoverlay