Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Josh Hicks
Josh Hicks
14,146 Points

How do I put icons inside of input fields?

I know how to use a placeholder for text, but how do people put things like a magnifying glass in a search field? My guess is an absolutely positioned image, but that doesn't make sense for responsive sites.... thanks in advance!

5 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You can use relative absolute positioning with a wrapper div and text-ident. I'm using font awesome for my icon because icon fonts load faster than images due to saving on a http request.

img

working demo: http://codepen.io/jamesbarnett/pen/aBnbL

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

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search { position: relative; }
.search input { text-indent: 30px;}
.search .fa-search { 
  position: absolute;
  top: 24px;
  left: 7px;
  font-size: 15px;
}
Josh Hicks
Josh Hicks
14,146 Points

where are you importing that magnifying glass from? I see that it's linked to the "fa" class but where is that image coming from?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Josh Hicks -

It's coming from a font awesome style sheet, in my pen it was linked in the <head> although the codepen UI doesn't make that obvious so I've updated my pen to use a @import to make that clearer.

Cena Mayo
Cena Mayo
55,236 Points
Cena Mayo
Cena Mayo
55,236 Points

Hi Josh,

This StackOverflow question might give you some insight.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Cena Mayo -

mod note

StackOverflow is a great resource, however that page has quite a few different approaches on it. A way to improve this answer would be a short sentence or 2 on the approach you've found useful in that particular stack overflow answer.

Erik Nemesis
Erik Nemesis
13,356 Points
Erik Nemesis
Erik Nemesis
13,356 Points

Use the pseudo-elements :before and :after, then move them a bit to the right/left using the position:relative and left/right properties

Look at http://www.gumbyframework.com for some examples

saracope2
saracope2
3,457 Points
saracope2
saracope2
3,457 Points

Here's a project I was working on of a Google clone that includes a microphone in the search box. It's just a background image on the input field like was mentioned in the stackoverflow link above. 

input {
    width: 450px;
    padding: 5px;
    margin: 15px;
    height: 25px;
    background-image: url('images/microphone.png');
    background-repeat: no-repeat;
    background-position: right;
}
Kyle Case
Kyle Case
44,857 Points
Kyle Case
Kyle Case
44,857 Points

Use a <span> element and style it with CSS.