圖標在引導4裏面輸入

我要尋找一個解決方案來創建和輸入這樣一個自舉4 圖標在引導4裏面輸入

我使用的字體真棒，這是我使用

   <div class="input-group"> 
       <label class="control-label">Username</label> 
       <input type="text" class="form-control" placeholder="Username" /> 
       <span> 
        <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
       </span> 
      </div>

代碼

，但我得到的圖像進行輸入的任何幫助，請 https://jsfiddle.net/5db2ho62/

來源

2017-05-29 Mohamed Sherif Noureldin

創建一個小提琴。我可以編輯 –

你能描述你想要達到的目標嗎？您提供的圖像不會加載（另外，爲了下一代的緣故，您不應該依賴SO中的圖像） – Shtut

@SyamPillai SO有[內置片段]（https：// stackoverflow。blog/2014/09/16/introduction-runnable-javascript-css-and-html-code-snippets /）now;在這種情況下沒有任何理由在網站外鏈接 – MTCoster

你並不需要有輸入 - 裏面的圖標，你可以下一個放置在中放置字段，並使用CSS刪除輸入字段的邊框。

HTML：

<div class="input-group"> 
<i class="fa fa-user-circle-o"></i> 
<input type="text" class="form-control" placeholder="Enter Name Here" > 
</div>

CSS：

input{ 
    border:none; 
    background-color: transparent; 
} 

input:focus, 
select:focus, 
textarea:focus, 
button:focus { 
    outline: none; 
} 

.fa-user-circle-o{ 
    color: gray; 
}

更新小提琴： https://jsfiddle.net/5db2ho62/2/

來源

2017-05-29 13:28:32 Shtut

但我需要它有一個像上面的圖像的邊框 –

@MohamedSherifNoureldin你可以添加一個邊框到外部div，它看起來是相同的 - 更新小提琴 – Shtut

的解決方案是可能的佔位符使用unicode。這裏的cheatsheet所有字體真棒統一http://fontawesome.io/cheatsheet/

input { 
 
    padding:10px; 
 
    font-family: FontAwesome, "Open Sans", Verdana, sans-serif; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <label class="control-label">Username</label> 
 
    <input type="text" class="form-control" placeholder="&#xf075; Username" /> 
 
</div>

來源

2017-05-29 13:32:30

這裏是解決

span{ 
 
    position: absolute; 
 
    margin-left: 5px; 
 
    height: 25px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
input{ 
 
    padding-left: 25px; 
 
    height: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="input-group"> 
 
    <span> 
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
 
    </span> 
 
    <input type="text" class="form-control" placeholder="Username" /> 
 
</div>

這裏工作fiddle

來源

2017-05-29 13:35:00

-1

將圖標置於文本區域內不是一個很好的解決方案。最好的方法是創建一個簡單的解決方法。所以首先我們將創建一個表單和輸入字段之前的圖標如下圖所示：

input { 
 
    border: none; 
 
    background-color: white; 
 
} 
 

 
input:focus, 
 
select:focus, 
 
textarea:focus, 
 
button:focus { 
 
    outline: none; 
 
}

<div class="input-group"> 
 
    <i class="fa fa-user"></i> 
 
    <input type="text" class="form-control" placeholder="Please enter your name" > 
 
</div>

見jsfiddle

下了一些造型，我們將做出一些改變，使它看起來像它的一個input場：

input { 
 
    border: none; 
 
    background-color: transparent; 
 
} 
 

 
.fa-user { 
 
    padding: 5px; 
 
} 
 

 
.input-group { 
 
    border: 1px solid black; 
 
    width: 250px; 
 
} 
 

 
input:focus, 
 
select:focus, 
 
textarea:focus, 
 
button:focus { 
 
    outline: none; 
 
}

<div class="input-group"> 
 
    <i class="fa fa-user"></i> 
 
    <input type="text" class="form-control" placeholder="Please enter your name" > 
 
</div>

看jsfiddle

希望這有助於！

來源

2017-05-29 13:39:09 Deathstorm

圖標在哪裏？ –

圖標在引導4裏面輸入

回答

相關問題