Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can anyone provide guidance on resolving this minor issue? I have also attached a photo for reference: [Link](https://i.sstatic.net/1sa3S.png). Here is the code snippet:

<!--Contact-->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <div class="col-md-8">
                <div class="input-wrapper">
                  <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                  <label for="fname" class="fa fa-user input-icon bigicon"></label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                  <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">

                  <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
                  <label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>



  html{
  box-sizing: border-box;}
  *,
  *: before, 
  *: after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
  }
  body{background-image: url();
   width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family:"Quicksand";
  font-size: 1.2em;
  line-height: 1.375em;
  padding: 0;
  margin: 0;
  background-color: #2F3A3B;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  }

 navbar-brand{

    height: 3em;
    width: 3em;
    margin-top: -8px;
    border-radius: 5.0em;
    margin-right: 1em;
    margin-left: -5em;
    margin-bottom: -8px
}

.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;

}
  .intro{
    display: inline-block;
    width: 100%;
    padding: 65px 0 65px;
    background-color: #2A2332;
    background-size: cover;
    font-size: 1.9em;
    text-align: center;
    color: #FFF;
  }

   h1{
    font-weight: medium;
    text-shadow:5px 5px 10px black;
  }

  h4{
    font-size: -.5em;
  }


.row{
  margin-right: 4em;
  margin-left: 4em;
  margin-top: .10em;
  padding-bottom: -.30em;

}

.container {
  margin-left: 17em;
  padding-top: 1.5em;

}

.bigicon {
  font-size: 35px;
  color: #808080;

}

.input-icon {
  position: absolute;
  left: .5rem;
  top: calc(50% - 0.5em);

  /* Keep icon in center of input, regardless of the input height */
}


#message {
  vertical-align: middle;
}
input {

  padding-right:30px;

}

.form-control {
  text-indent: 2rem;
  width: 75%;




}

.input-wrapper {
  position: relative;


}

.btn{

  margin-right: 10em;

}


  @media screen and (min-width: 640px){


  }

  @media screen and (min-width: 960px){

  }
[![enter image description here][1]][1]
  main {flex: 1;}

Answer №1

Check out this code snippet that aligns the input-icon with your input text.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  background-image: url();
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family: "Quicksand";
  font-size: 1.2em;
  line-height: 1.375em;
  padding: 0;
  margin: 0;
  background-color: #2F3A3B;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

navbar-brand {
  height: 3em;
  width: 3em;
  margin-top: -8px;
  border-radius: 5.0em;
  margin-right: 1em;
  margin-left: -5em;
  margin-bottom: -8px
}

.avatar {
  border-radius: 5em;
  margin-right: .5em;
  margin-left: 1em;
}

.intro {
  display: inline-block;
  width: 100%;
  padding: 65px 0 65px;
  background-color: #2A2332;
  background-size: cover;
  font-size: 1.9em;
  text-align: center;
  color: #FFF;
}

h1 {
  font-weight: medium;
  text-shadow: 5px 5px 10px black;
}

h4 {
  font-size: -.5em;
}

.row {
  margin-right: 4em;
  margin-left: 4em;
  margin-top: .10em;
  padding-bottom: -.30em;
}

.container {
  margin-left: 17em;
  padding-top: 1.5em;
}

.bigicon {
  font-size: 35px;
  color: #808080;
}

.input-icon {
  position: absolute;
  left: .5rem;
  top: .9rem;
  /* Keep icon in center of input, regardless of the input height */
}

#message {
  vertical-align: middle;
}

input {
  padding-right: 30px;
}

input.form-control {
  padding-left: 2rem;
}

.input-wrapper {
  position: relative;
}

textarea.form-control {
  padding-left: 2rem;
}

.btn {
  margin-right: 10em;
}

@media screen and (min-width: 640px) {}

@media screen and (min-width: 960px) {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!--Contact-->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <div class="col-md-8">
                <div class="input-wrapper">
                  <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                  <label for="fname" class="fa fa-user input-icon bigicon"></label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                  <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">

                  <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
                  <label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

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

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

Want to know how to get images to show up when sharing a link on Twitter?

For illustration purposes, I am using a CNN article page: The HTML head section of the webpage contains the following tag: <meta name="twitter:image" content="http://i2.cdn.turner.com/money/dam/assets/150114084151-inside-tracker-120x90.png"> Howe ...

Arrangement of elements in Bootstrap

Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html: <div class="container"> <div cla ...

Trim the edges of a photo and add the Kinetic filter

Currently, I am utilizing Kinetic for image processing purposes. The issue arises when I crop an image and then attempt to convert it to black and white by clicking a button. Unfortunately, the straightforward setFilter function does not seem to work in th ...

Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line. My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle: .rotate { transform ...

The connected callback does not trigger when custom HTML elements are being created

Attempting to craft a custom HTML tag using JavaScript, I aimed to create the custom element with ES6 JavaScript syntax. The code devised for this task reads as follows: customElements.define('neo-element', NeoElement); function NeoElement (){ ...

Enigmatic blank space found lurking beneath the image tag

Recently, I made a change to the header image on my website. Previously, it was set using <div style="background-image... width=1980 height=350> and now I switched to <img src="... style="width:100%;"> This adjustment successfully scaled do ...

How can I make the arrows work on a secondary slider with EasySlider1.7?

I finally managed to get 2 sliders working on my page after reading through several other tutorials. However, I am facing an issue with the Prev & Next arrows on the second slider as they don't seem to work properly. I inherited this page from someon ...

Effortlessly fill dropdown menus with data from JSON files

I've been using this jQuery code successfully, but I recently needed to add 3 more field columns to the JSON. My goal is to have the HTML select drop-downs dynamically change based on the data from the previous drop-down. Additionally, my current jQue ...

The width of table cells expands even when using the box-sizing property set to border-box

Whenever I click the View button, I want to apply padding to the cells in my table. However, this action also increases the width of the cell. Despite researching various solutions like those found in this question, this one, and this post, I still encount ...

Troubleshooting a unique CSS problem on an Android PhoneGap

We are currently working on an Android application using PhoneGap, HTML, CSS, and jQuery Mobile. After compiling the application in Eclipse, everything seems to work correctly. However, I am facing an issue where my CSS styles are not updating when recompi ...

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

jQuery "slide" animation without using <br>

I've been working on a website that incorporates the jQuery "Slide" effect. I have implemented this effect multiple times, using it on 3 different div tags. Each line consists of one "Dynamic" div tag (the moving one) and one "Static" div tag (the tri ...

Aligning an image alongside two separate blocks of text

I'm having trouble creating a header bar on my HTML page with a h1 and h2 element, along with an image positioned to the right of both. No matter what I try, the image keeps appearing below the other elements. I attempted using display:inline-block; b ...

Speed up the opening and closing of a div element on mouse hover

Looking to create a smooth delay for opening and closing a div when mouse hover. Here is the code I have: function show_panel1() { document.getElementById('hoverpanel1').style.display="block"; } function hide_panel1() { document.getElementByI ...

Encountering spacing problems on IE9 and FF11 while using OS X

After conducting some testing on a design I coded, I found that it functions well in FF 13, Chrome 21, IE 7/8, and Opera 11.62 for Windows, as well as Safari 5.1 for OS X. Unfortunately, since I only have WinXP, I had to utilize Adobe Browserlab to test f ...

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

Send the user to the login page once their email has been verified

On my website, I have a process where users need to verify their email by clicking on a link sent through emails. When the user clicks on this verification link, I want them to be redirected to a page thanking them for confirming their account and then a ...

Is there a way to prevent this picture from shifting?

I am currently revamping the content on my work website using Joomla. I have received the old copy and now I need to enhance it. The website in question is 24x7cloud.co.uk. At the bottom of the page, I aim to include an "Accreditation's" section. Howe ...

Applying a left margin has caused the right border to disappear

After adding a margin-left to the box, I noticed that my right border is missing. You can see the issue in this example. However, when I remove the margin-left property, everything looks fine as shown in this example. Is there any way to solve this proble ...