2016-05-23 8 views
0

Bitte helfen Sie mir mit dieser einfachen Frage. Ich habe keine Antwort gefunden.Ruby: Place Font Awesome innerhalb text_field_tag ​​

Ich habe diesen text_field_tag:

<div class="col-xs-4"><i class="fa fa-map-marker fa-2x"></i><%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %></div> 

Ich will Schrift genial in meinem text_field_tag ​​platzieren, aber ..

Was geschehen ist, das Symbol Anzeige außerhalb vom text_field_tag ​​

enter image description here

Eigentlich weiß ich, warum das passiert, weil die Schriftart super außerhalb des text_field_tag ​​ist. Ich versuche, font super in den text_field_tag ​​zu platzieren, bekomme aber einen Fehler.

Was ist der richtige Weg, um die Schriftart in den Text_field_tag ​​super zu platzieren? Hoffe, dass jemand diese einfache Frage beantworten kann.

Vielen Dank!

Antwort

2

Das Problem ist, dass form-control Breite als 100% festgelegt ist. Sie müssen dies manuell ändern und display auf inline setzen.

<div class="col-xs-4 someclass"><i class="fa fa-map-marker fa-2x"></i><%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %></div> 

CSS

.someclass i { 
    display: inline; 
} 
.someclass .form-control { 
    display: inline; 
    width: 95%; 
} 

sollten diese CSS, wo Sie import bootstrap in application.css gegeben werden. Ansonsten müssen Sie important! an jedes Attribut in der form-control css geben.

+0

Hallo @sajinmp. Das ist nicht die Antwort, nach der ich suche. Was machst du nur machen die Schriftart super und text_field_tag ​​in einer Zeile. was ich will ist, ich möchte die font awesome in das text_field_tag ​​setzen. Haben Sie eine Idee, die Schrift INSIDE in the text_field_tag ​​groß zu machen, außer dass Sie das Icon und den text_field_tag ​​in einer Zeile machen? danke –

+0

Überprüfen Sie diese http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content – sajinmp

2

Versuchen Sie, diese

<div class="input-group"> 
    <%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-map-marker"></span> 
    </span> 
</div> 
+0

Ich habe die Idee, aber müssen nur eine kleine Zeile Code ändern. trotzdem danke ! –

+0

Dies ist der richtige Weg –