如何将“真棒字体"图标添加到文件输入字段 [英] How do I add a Font Awesome icon to file input field

问题描述

我有一个文件输入按钮，而不是浏览，我想要在那里显示Font Awesome上传图标，但是我什么都没尝试就给了我结果.

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.

这是我尝试过的方法:

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

推荐答案

您可以使用 display:none 隐藏文件 input 并创建自定义按钮，或者在这种情况下创建字体-很棒的图标，它将触发输入.您也可以使用 span 来显示输入值，该值将随输入值的变化而变化.

You could hide file input with display: none and create custom button or in this case font-awesome icon that will trigger input. Also you can use span to display input's value that will change on input value change.

$("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>

这篇关于如何将“真棒字体"图标添加到文件输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！