ein fontawesome Symbol mit Rahmen in Form Eingang Hinzufügen

ist es eine Möglichkeit, so etwas zu erreichen:ein fontawesome Symbol mit Rahmen in Form Eingang Hinzufügen

Ich habe versucht Optionen, die ich hier in Stapel gefunden (mit Span unter Verwendung), aber selbst wenn Ich habe es geschafft, es ist unmöglich für mich, diese weiße Linie rechts von Icon zu machen, kann mir jemand helfen?

Mein aktueller Code sieht wie folgt aus:

    <form> 
        <input type="text" name="firstname" placeholder="Name"> 
        <input type="text" name="firstname" placeholder="e-mail"> 
        <input type="text" name="firstname" placeholder="website"> 
       </form>

Ich habe auch versucht, mit Grenzen dieses Symbol in Container Hinzufügen Effekt zu erzielen:

<form> 
        <span class="form_frame"><i class="fa fa-user-circle-o" aria-hidden="true"></i> 
        </span> 
        <input type="text" name="firstname" placeholder="Name">

und CSS:

.form_frame { 
height: 60px; 
border-width: 1px solid; 
border-color: white; 
width: 100%; 
    background-color: #2b2b2b;

Aber kein Erfolg

Danke für jede Hilfe.

Quelle

2017-03-24 Miyagi

Sie sollten uns zeigen Sie Ihren Code, so können wir einen Blick auf sie haben. – Robert

überprüfen Sie diese Antwort und verwenden Sie

mit Grenzen. http://stackoverflow.com/questions/25708569/font-awesome-icons-in-html-form Hoffen, dass es hilft –

@Robert hat meinen Beitrag aktualisiert – Miyagi

das Symbol hinzufügen und die Eingabe in einer Spanne. Sie können dann einen Rahmen zu der gesamten Spannweite hinzufügen, wenn Sie möchten, können Sie einen Rahmen nur auf das Symbol oder das Eingabefeld setzen.

.fa-address-book-o { 
 
border: solid; 
 
border-color: red; 
 
}

<head> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
</head> 
 
<span><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"/></span>

Quelle

2017-03-24 12:32:39 Naomi

funktioniert wie ein Charme, danke – Miyagi

Sie können Labels verwenden Ich denke, das ist ein guter Anfang.

.wr{border:2px solid black;padding:12px;}

<form> 
 
     <diV class="wr"> 
 
     <label for="user"> <i class="fa fa-camera-retro">(icon_img)</i></label><input type="text" name="user" placeholder="Username"/> </diV> 
 
     <div class="wr"> 
 
     <label for="pass"> <i class="fa fa-futbol-o">(icon_img)</i></label><input type="password" name="password" placeholder="Password"/> </div> 
 
    </form>

Quelle

2017-03-24 12:31:58

ein fontawesome Symbol mit Rahmen in Form Eingang Hinzufügen

Antwort

Verwandte Themen