4

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.

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.

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Aniket Singh
  • 857
  • 4
  • 16
  • 39

4 Answers4

21

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>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
3

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

All you have to do is add a few attributes to your input and download/include the plug-in's JS after Bootstrap's 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-iconName and your verbiage will go in 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.

Working Demo Here

Tricky12
  • 6,752
  • 1
  • 27
  • 35
1

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

This being the case, you can use the "after or before" pseudo class in your CSS like so:

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

Hope this helps.

ben.kaminski
  • 986
  • 3
  • 13
  • 24
0

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

.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>
syed riyaz
  • 1
  • 2