Bootstrap Snippet file upload button with a FontAwesome 3.2.1 icon using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- 
    utterly simple Bootstrap 2 solution using a label, 
    opposed to the default button offered @ http://getbootstrap.com/css/
 -->
<form>
    <span id="fileselector">
        <label class="btn btn-default" for="upload-file-selector">
            <input id="upload-file-selector" type="file">
            <i class="fa_icon icon-upload-alt margin-correction"></i>upload file
        </label>
    </span>
</form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
/* 
    FORM STYLING
*/
#fileselector {
    margin: 10px; 
}
#upload-file-selector {
    display:none;   
}
.margin-correction {
    margin-right: 10px;   
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"file upload button with a FontAwesome 3.2.1 icon"
Bootstrap 2.3.2 Snippet by alexk

Related: See More

Questions / Comments:

"file upload button with a FontAwesome 3.2.1 icon" Bootstrap 2.3.2 Snippet by alexk

Related: See More

Questions / Comments:

"file upload button with a FontAwesome 3.2.1 icon"
Bootstrap 2.3.2 Snippet by alexk