添加與邊境fontawesome圖標到表單輸入

我已經試過了，我發現這裏的堆棧選項（使用範圍），但即使我做了它的工作，我不可能在圖標的右邊做那條白線，有人可以幫我嗎？

我當前的代碼看起來像這樣：

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

我也嘗試添加該圖標在容器邊框達到的效果：

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

但是沒有成功

感謝您的幫助。

來源

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

添加與邊境fontawesome圖標到表單輸入

回答

相關問題