Ajouter / ajouter des icônes bootstrap avec une forme simple
Les icônes de Twitter Bootstrap sont assez mortelles vu ici .
Regardez le coin inférieur droit de cette section. Voir cet e-mail avec une icône préfixée? C'est ce que je veux faire. Je veux faire en sorte que simple_form et boostrap jouent bien.
Voici ce que j'ai trouvé qui va ajouter l'icône à l'entrée:
= f.input :email, :wrapper => :append do
= f.input_field :email
<span class="add-on"><i class="icon-envelope"></i></span>
Mais ce n'est pas flush (cela pourrait être corrigé en changeant les décalages en CSS) et c'est assez moche. Pour référence, voici le correctif CSS (ajoutez-le à votre bootstrap_overrides.CSS.moins de fichier):
.input-prepend .add-on,
.input-append input {
float: left; }
Quelqu'un connaît-il un moyen moins hacky de faire préfixer simple_form ou d'ajouter une icône avec bootstrap?
Mise à jour:
La réponse ci-dessous m'a fait jeter un autre coup d'œil. HAML ajoute généralement des espaces partout, mais il existe une solution de contournement
Voici une mise à jour pour le HAML d'origine qui supprime les espaces et ne nécessite pas le hack CSS:
= f.input :email, :wrapper => :append do
= f.input_field :email
%span.add-on>
%i.icon-envelope
Ce peu plus grand que ( > ) fait toute la différence. Le HTML de sortie n'a pas de saut de ligne entre l'entrée et la durée.
2 réponses
C'est dû à des espaces entre les éléments input et span rendus. Dans ce cas, un saut de ligne.
Je ne suis pas assez familier avec HAML pour vous dire comment éliminer les espaces, mais L'ERB équivalent irait quelque chose comme:
<%= f.input :email, :wrapper => :append do %>
<%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>
J'ai trouvé une meilleure façon de le faire, de garder placeholder, label, et d'autres options intacte.
Pour ceux qui utilisent encore L'Ancien Bootstrap 2.3.x
<div class="input-prepend">
<span class="add-on">@</span>
<%= f.input_field :password, :required => true, :label=>false, :placeholder=>"Password" %>
</div>
La clé utilise f.input_field pour supprimer tous les wrappers div.
Mise à JOUR
Vous pouvez utiliser l'autre solution pour inclure un espace réservé, mais vous ne pouvez pas supprimer l'étiquette en utilisant cette solution.
<%= f.input :email, :wrapper => :append do %>
<%= f.input_field :email, placeholder: "hello" %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>