如何在文件输入字段中添加字体图标

Question

我有一个文件输入按钮，而不是浏览，我想显示字体可怕的上传图标，但无论我尝试什么都没有给我的结果。

这里是我尝试过的：

​

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

​

通过上面的代码，我只得到一个图片，而不是浏览按钮，但我想使用字体Awesome图标。

Answer 1

您可以隐藏文件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>

​

Answer 2

因为你正在使用引导-如果你是开放使用一个小插件，有一个将做你想做的。插件是引导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添加或删除文本输入部分。True用于显示它，false (如下面的演示所示)隐藏它。

这里的工作演示

Answer 3

还有一种方法可以使用CSS和FontAwesome来处理这个场景。如果您访问fontawesome的网站并查看示例，我将在本例中使用"fa -星号“，您将注意到，一旦您单击该图标并将其带到页面，它将为您提供一个UNICODE值。例如，星号的UNICODE值是"f069“。

在这种情况下，您可以在CSS中使用“后置或前”伪类，如下所示：

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

这将在(在本例中)任何输入按钮文本之前放置一个方框星号。如果希望按钮只显示图标，就不要输入任何输入文本，只需使用伪类来处理只使用CSS的字体图标的分布。

希望这能有所帮助。