如何添加字體真棒圖標到文件輸入字段

我有一個文件輸入按鈕，而不是瀏覽我想在那裏顯示字體真棒上傳圖標，但無論我什麼都沒有給我結果。如何添加字體真棒圖標到文件輸入字段

這裏是我試過：

.select-wrapper { 
 
    background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat; 
 
    background-size: cover; 
 
    display: block; 
 
    position: relative; 
 
    width: 33px; 
 
    height: 26px; 
 
} 
 
#image_src { 
 
    width: 26px; 
 
    height: 26px; 
 
    margin-right: 100px; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); /* IE 5-7 */ 
 
}

<div class="container"> 
 
    <span class="select-wrapper"> 
 
    <input type="file" name="image_src" id="image_src" /> 
 
    </span> 
 
</div>

通過上面的代碼我只得到一張照片，而不是瀏覽按鈕，但我想用字體真棒圖標。

來源

2016-04-06 Aniket Singh

@JacobGray我試過在輸入類中添加圖標類 –

喜歡這個？ http://stackoverflow.com/a/30858367/483779 – Stickers

@Pangloss我試過但沒有結果來了 –

可以隱藏文件input與display: none並創建自定義按鈕，或在這種情況下，字體真棒圖標，將觸發輸入。您也可以使用span來顯示輸入值將隨輸入值更改而改變。

$("i").click(function() { 
 
    $("input[type='file']").trigger('click'); 
 
}); 
 

 
$('input[type="file"]').on('change', function() { 
 
    var val = $(this).val(); 
 
    $(this).siblings('span').text(val); 
 
})

.element { 
 
    display: inline-flex; 
 
    align-items: center; 
 
} 
 
i.fa-camera { 
 
    margin: 10px; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
} 
 
i:hover { 
 
    opacity: 0.6; 
 
} 
 
input { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element"> 
 
    <i class="fa fa-camera"></i><span class="name">No file selected</span> 
 
    <input type="file" name="" id=""> 
 
</div>

來源

2016-04-06 14:38:15

您已經完成了超過OP問題，太棒了！ – Stickers

由於您使用的是Bootstrap，如果您打算使用小插件，那麼您可以按照自己的意願進行操作。該插件是Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/。

您只需在input中添加一些屬性，並在Bootstrap的JS之後下載/包含插件的JS。

<input type="file" class="filestyle" name="image_src" id="image_src" data-input="false" data-iconName="fa fa-upload" data-buttonText="Upload File" />

你的字體真棒圖標類會在data-iconName和你空話將data-buttonText去。

此外，您可以使用data-input添加或刪除文本輸入部分。如果要顯示它並且爲false（如下面的演示中所示）以隱藏它。

Working Demo Here

來源

2016-04-06 14:37:29 Tricky12

工程很棒 - 但請注意，這需要versionstyle> = 1.2的filestyle – milkman

有則可以僅使用CSS和FontAwesome處理這種情況的另一種方式。如果您訪問FontAwesome的網站並查看示例，我將在本例中使用「fa fa-asterisk」，您會注意到，一旦您點擊該圖標並將它帶到頁面，它會爲您提供一個UNICODE價值爲fontawesome圖標。例如，星號的UNICODE值是「f069」。

既然如此，您可以使用「之前或之後」僞類在你的CSS像這樣：

[input]#img_src::before { 
font-family: 'FontAwesome'; 
content: '\f069' 
}

這將會把一個fontawesome星號之前（在這種情況下）的任何輸入按鈕文本。如果你想讓按鈕只顯示圖標，只需不要輸入任何輸入文本，只需使用僞類來處理僅使用CSS的fontawesome圖標的分佈。

希望這會有所幫助。

來源

2016-04-06 14:52:52

如何添加字體真棒圖標到文件輸入字段

回答

相關問題