フォーム入力

に国境とfontawesomeのアイコンを追加すると、このような何かを達成するためにどのような方法があります：私は（スパンを使用して）スタックではなくても、ここにあるオプションを試してみたフォーム入力

は、私はそれが私の右の白い線をアイコンからすることは不可能な仕事をした、誰かが私を助けることができますか？

私の現在のコードは以下のようになります。

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

とCSS：

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

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

は私も効果を達成するために国境を容器にそのアイコンを追加しようとしました

しかし、サクセスはありません

ありがとうございました。

出典

2017-03-24 Miyagi

あなたは私達にあなたのコードを表示する必要がありますので、我々はそれを見てすることができます。 – Robert

この回答を確認し、

に罫線を付けてください。 http://stackoverflow.com/questions/25708569/font-awesome-icons-in-html-form希望があれば –

@Robertが私の投稿を更新しました – Miyagi

アイコンとスパン内の入力を追加します。アイコンや入力ボックスだけに境界線を置くことができるようにするには、スパン全体に枠線を追加することができます。

.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>

出典

2017-03-24 12:32:39 Naomi

が表示されたい、ありがとう – Miyagi

ラベルを使用できますこれは良いスタートだと思います。

.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>

出典

2017-03-24 12:31:58

答えて

関連する問題