CODEWITHSUNDEEP
htmlcss
Dom
Dom

Reputation: 343

Add font awesome icon to input type using :after

I am trying to use the :after CSS on an input field, but it does not work.

What am I doing wrong? Should I use another selector?

._ght{
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}
._ght input[type="text"]{
  width: 48%;
  line-height: 32px;
  font-size: 26px;
  border: solid 1px #94a6ae;
}
._ght input:after{
  font-family: FontAwesome;
  content: "\f06e";
}
<div class="_ght">
  <input type="text" name="">
</div>

Example Here:

enter image description here

Upvotes: 0

Views: 271

Answers (2)

roest
roest

Reputation: 376

As @zgood wrote: :before and :after work with html elements only.

I would recommend using an extra span to display your icon after that input.

  <span class="addon"></span>

Without extra HTML add your icon to the :after element of your input container.

._ght{
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}
._ght input[type="text"]{
  width: 48%;
  line-height: 32px;
  font-size: 26px;
  margin-left: 10px;
  border: solid 1px #94a6ae;
}
._ght:after{
      font-family: FontAwesome;
      font-size: 25px;
      content: "\f06e";
      border: 1px solid grey;
      padding: 6px 4px 3px 4px;
      margin-left: -5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="_ght">
  <input type="text" name="">
</div>

Upvotes: 4

Friday Ameh
Friday Ameh

Reputation: 1684

this should solve your problem.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
        search{
                float: left; width: 800px;
                margin-left: 220px
            }

            .search input[type=text]{
                padding: 10px;
                width: 600px;
                border-right: none;
                border: 1px solid #f1f1f1;
                float: left;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
            }


            .search button[type=submit]{
                padding:9px 20px;
                border-left: none;
                float: left;
                border: 1px solid #f1f1f1;
                border-bottom-right-radius: 5px;
                border-top-right-radius: 5px;
                color: #888;
            }

 </style>


      <div class="search">
                <form id="search">
                    <input type="text" placeholder="Search for Products and Services"/>
                    <button type="submit">
                    <i class="fa fa-search" style="font-size: 18px;"></i>
                    </button>
                </form>
            </div>

Upvotes: 0

Related Questions