Error icon corrido span html

Question

Error icon corrido span html

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have the following problem, in which way I can place an icon in the span that contains "$", by placing the icon of the template this is run, the icon should be in the place of "$" and not on top of the Fuel name thank you very much greetings,

<section class="col col-6">
  <div class="input-group">
     <span class="icon-append fa fa-user"></span>
      <input type="text" class="form-control" aria-label="Amount">
      <span class="input-group-addon">Nombre Combustible</span>
  </div>
</section>

When the suggestion is made, the icon is superimposed

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://use.fontawesome.com/812939c945.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<section class="col col-6">
  <div class="input-group">
     <span class="icon-append fa fa-user"></span>
      <input type="text" class="form-control" aria-label="Amount">
      <span class="input-group-addon">Nombre Combustible</span>
  </div>
</section>

Example

html css

asked by Javier Antonio Aguayo Aguilar 07.03.2017 в 14:22

source

3 answers

Pass two variables to a method in laravel Java - Problem with if [duplicate]

score 1 · Answer 1

Add the input-group-addon class to the addon you need

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to thenearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

In this way bootstrap detects that you want to put it at the beginning of the input.

score 1 · Answer 2

You can do so, without forgetting the class input-group-addon in the <span> that contains the symbol:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://use.fontawesome.com/812939c945.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<section class="col col-6">
  <div class="input-group">
     <span class="input-group-addon fa fa-user"></span>
     <input type="text" class="form-control" aria-label="Amount">
     <span class="input-group-addon">Nombre Combustible</span>
  </div>
</section>

This is another option adding a new element to contain the icon, but I must insist that it would not be necessary to do so since the selector :before of fa-user adds the icon in UTF-8 before the content:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://use.fontawesome.com/812939c945.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<section class="col col-6">
  <div class="input-group">
     <span class="input-group-addon"><b class="fa fa-user"></b></span>
     <input type="text" class="form-control" aria-label="Amount">
     <span class="input-group-addon">Nombre Combustible</span>
  </div>
</section>

score 0 · Answer 3

Solved, it was necessary to use an "i" tag with the name of the icon class thanks

<section class="col col-6">
  <div class="input-group">
  <span class="input-group-addon"><i class="fa fa-user"></i></span>
  <input type="text" class="form-control" aria-label="Amount">
  <span class="input-group-addon">Nombre Combustible</span>
  </div>
  </section>