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

HTML

Posted by Dom Smith
Dom Smith
3,091 Points

How do you add the bootstrap 'glyphicon-search' inside a input box?

Basically I'm using the Bootstrap Framework and have a input box used for searching however I'm struggling to get the bootstrap 'glyphicon-search' to be visible inside the input box, currently its outside.

Any suggestions would be of great help thanks in advance.

Dom Smith
Dom Smith
3,091 Points

<form class="navbar-form navbar-right"> <input type="text" class="form-control glyphicon glyphicon-search" placeholder="Search..."> <span class="glyphicon glyphicon-search"></span> </form>

Is currently my code.

2 Answers

Pedro Sousa
.a{fill-rule:evenodd;}techdegree
Pedro Sousa
Python Development Techdegree Student 18,546 Points

Hi Dom,

I'm not sure if I entirely understood what you're trying to accomplish, but have you tried re-styling it?

I made a little jsfiddle with my suggestion.

Cheers,

Dom Smith
Dom Smith
3,091 Points

Cheers, the fiddle really helped :) apologies for taking a while to get back to you

Drew Butcher
Drew Butcher
33,160 Points
Drew Butcher
Drew Butcher
33,160 Points

I would do just as you have done, and give the span element a position: absolute. Then adjust the 'left', 'right', 'up' and 'down' to position the search icon where I wanted it to appear.

This appear to be what www.hulu.com does.