twitter-bootstrap 如何将 Font Awesome 图标添加到文件输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36453728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a Font Awesome icon to file input field
提问by Aniket Singh
I have a file input button, instead of browse I want to show Font Awesome upload icon there but whatever I tried nothing gave me result.
我有一个文件输入按钮，而不是浏览，我想在那里显示 Font Awesome 上传图标，但无论我尝试什么都没有给我结果。
Here is what I've tried:
这是我尝试过的：
.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>By above code I only get a picture instead of browse button, but I want to use Font Awesome icon.
通过上面的代码，我只得到一张图片而不是浏览按钮，但我想使用 Font Awesome 图标。
回答by Nenad Vracar
You could hide file inputwith display: noneand create custom button or in this case font-awesome icon that will trigger input. Also you can use spanto display input's value that will change on input value change.
你可以隐藏文件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>回答by Tricky12
Since you are using Bootstrap - if you are open to using a small plug-in, there is one that will do what you want. The plug-in is Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/.
由于您使用的是 Bootstrap - 如果您愿意使用一个小插件，那么有一个可以满足您的需求。插件是 Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/。
All you have to do is add a few attributes to your inputand download/include the plug-in's JS after Bootstrap's JS.
您所要做的就是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" />
Your font-awesome icon class will go in data-iconNameand your verbiage will go in data-buttonText.
你的字体很棒的图标类将进入data-iconName，你的措辞将进入data-buttonText。
Additionally, you can add or remove the text input portion with data-input. True to show it and false (as in the demo below) to hide it.
此外，您可以添加或删除文本输入部分data-input。True 显示它，false（如下面的演示所示）隐藏它。
回答by ben.kaminski
There's another way you can handle this scenario using just CSS and FontAwesome. If you go to FontAwesome's website and look at the examples, I'm going to use "fa fa-asterisk" for this example, you will notice once you click the icon and it takes you to the page, it will give you a UNICODE value for the fontawesome icon. For example the UNICODE value for asterisk is "f069".
还有另一种方法可以仅使用 CSS 和 FontAwesome 来处理这种情况。如果您访问 FontAwesome 的网站并查看示例，我将在此示例中使用“fa fa-asterisk”，您会注意到，一旦单击该图标并将您带到该页面，它就会为您提供一个 UNICODE fontawesome 图标的值。例如，星号的 UNICODE 值为“f069”。
This being the case, you can use the "after or before" pseudo class in your CSS like so:
在这种情况下，您可以在 CSS 中使用“之后或之前”伪类，如下所示：
[input]#img_src::before {
font-family: 'FontAwesome';
content: '\f069'
}
This will place a fontawesome asterisk BEFORE (in this case) any input button text. If you want the button to only show the icon, simply don't enter any input text and just use the pseudo classes to handle the distribution of the fontawesome icons using only CSS.
这将在任何输入按钮文本之前（在本例中）放置一个超赞的星号。如果您希望按钮只显示图标，只需不要输入任何输入文本，只需使用伪类来处理仅使用 CSS 的 fontawesome 图标的分布。
Hope this helps.
希望这可以帮助。
