Style form elements with Font Awesome icons

Website owners often settle for the default ugly look of HTML forms. A visually descriptive and interactive conversion form can contribute immensely to your website’s ability to generate business leads. In this tutorial, I will teach you how to style form elements with Font Awesome Icons. We’ll not be going into HTML form interactivity at the moment but we’ll do so in further tutorials. Let’s focus on giving the form a visual upgrade.

  1. Create a blank fiddle on jsfiddle.net
  2. Add the line of code below to the external resource provision on jsfiddle. You will find it on the left pane
  3. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
    
  4. Replicate the HTML form below. Notice that the form element is wrapped in a span.
  5. <form> 
     <span>  <input type="text" placeholder="Whatever you like" /> </span>
    </form>
    
  6. Click on the link provided below to get the CSS content value of the icon you want to use, then read the CSS that follows. To better understand this tutorial, pay attention to the comments.
    CSS Values for Font Awesome icons
  7. form span input {
        width: 100%;
        height: 35px;
        padding-left: 50px; /* Makes room for the icon */
        border: solid 4px gray;
        display: block;
    }
    
    span {
        width: 200px;
        height: auto;
        position: realtive;
        display: block;
        position: relative; /* Helps keep the icon within desired position */
        margin-bottom: 10px;
    }
    
    span:after {
        content: '\f007'; /* Add the CSS content value of your desired icon between the quotes */
        font-family: fontAwesome; 
        line-height: 40px;
        font-size: 20px;
        width: 50px;
        height: 45px;
        display: block;
        position: absolute; /* Allows complete control of the icon */
        top: 0;
        left: 20px;
        color: gray;
    }
    
    

See editable and working example here.
That is it. If you have questions, post it here and I’d be glad to help you.

Leave a Reply