prepend (instead of append) bootstrap icon to input box
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Would any of you be able to figure out how to make <i class="icon-dollar"></i> show in front of the text input box? As you can see in the screenshot, There is a temporary placeholder I've added with ascii $. I can't seem to get the icon-dollar class to show up in the front(prepend) instead of the ascii $ in the back Screenshot I've appended the span at end currently, but if it should be prepended to the front, where do we place the span?

code
Screenshot

Just out of curiosity, why not replace the add-on content_tag with <span class="add-on"><i class="icon-dollar"></i></span>?
weslly over 5 years ago
awarded to sguha

Crowdsource coding tasks.

2 Solutions


Have you tried the following HTML?

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-dollar"></i></span><input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>
Winning solution

Here's a pull request https://github.com/akshatpradhan/lending-round/pull/26 using icon-dollar and moving the percent to be after the input

This was it. I'm not sure why the PR closed, but your commit is in my branch.
akshatpradhan over 5 years ago
View Timeline