CODEWITHSUNDEEP
twitter-bootstrapcssfont-awesome
Aniket Singh
Aniket Singh

Reputation: 877

How do I add a Font Awesome icon to file input field

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.

Upvotes: 5

Views: 33779

Answers (4)

syed riyaz
syed riyaz

Reputation: 1

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

Upvotes: 0

ben.kaminski
ben.kaminski

Reputation: 976

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.

Upvotes: 1

Tricky12
Tricky12

Reputation: 6822

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

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 22

Related Questions