如何添加字体真棒图标到文件输入字段

我有一个文件输入按钮，而不是浏览我想在那里显示字体真棒上传图标，但无论我什么都没有给我结果。如何添加字体真棒图标到文件输入字段

这里是我试过：

.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

如何添加字体真棒图标到文件输入字段

回答

相关问题