如何将 Font Awesome 图标添加到文件输入字段
How do I add a Font Awesome icon to file input field
我有一个文件输入按钮,而不是浏览我想在那里显示 Font Awesome 上传图标,但无论我尝试什么都没有给我结果。
这是我试过的:
.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>
通过上面的代码我只得到了一张图片而不是浏览按钮,但我想使用 Font Awesome 图标。
因为您正在使用 Bootstrap - 如果您愿意使用一个小插件,那么有一个可以满足您的需求。插件是 Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/.
您所要做的就是在 Bootstrap 的 JS 之后为 input
和 download/include 插件的 JS 添加一些属性。
<input type="file" class="filestyle" name="image_src" id="image_src" data-input="false" data-iconName="fa fa-upload" data-buttonText="Upload File" />
您的超棒字体图标 class 将放入 data-iconName
,您的废话将放入 data-buttonText
。
此外,您可以使用 data-input
添加或删除文本输入部分。 True 显示它,false(如下面的演示)隐藏它。
您可以使用 display: none
隐藏文件 input
并创建自定义按钮或在本例中创建可触发输入的超棒字体图标。您也可以使用 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>
还有另一种方法可以仅使用 CSS 和 FontAwesome 来处理这种情况。如果你去 FontAwesome 的网站并查看示例,我将在这个示例中使用 "fa fa-asterisk",你会注意到一旦你单击该图标并将你带到页面,它会给你一个 UNICODE 值对于 fontawesome 图标。例如,星号的 UNICODE 值为 "f069".
在这种情况下,您可以像这样在 CSS 中使用 "after or before" 伪 class:
[input]#img_src::before {
font-family: 'FontAwesome';
content: '\f069'
}
这将在任何输入按钮文本之前(在本例中)放置一个超赞的星号。如果您希望按钮只显示图标,只需不要输入任何输入文本,只需使用伪 classes 来处理仅使用 CSS.[=11= 的超棒图标的分布]
希望对您有所帮助。
.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>
我有一个文件输入按钮,而不是浏览我想在那里显示 Font Awesome 上传图标,但无论我尝试什么都没有给我结果。
这是我试过的:
.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>
通过上面的代码我只得到了一张图片而不是浏览按钮,但我想使用 Font Awesome 图标。
因为您正在使用 Bootstrap - 如果您愿意使用一个小插件,那么有一个可以满足您的需求。插件是 Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/.
您所要做的就是在 Bootstrap 的 JS 之后为 input
和 download/include 插件的 JS 添加一些属性。
<input type="file" class="filestyle" name="image_src" id="image_src" data-input="false" data-iconName="fa fa-upload" data-buttonText="Upload File" />
您的超棒字体图标 class 将放入 data-iconName
,您的废话将放入 data-buttonText
。
此外,您可以使用 data-input
添加或删除文本输入部分。 True 显示它,false(如下面的演示)隐藏它。
您可以使用 display: none
隐藏文件 input
并创建自定义按钮或在本例中创建可触发输入的超棒字体图标。您也可以使用 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>
还有另一种方法可以仅使用 CSS 和 FontAwesome 来处理这种情况。如果你去 FontAwesome 的网站并查看示例,我将在这个示例中使用 "fa fa-asterisk",你会注意到一旦你单击该图标并将你带到页面,它会给你一个 UNICODE 值对于 fontawesome 图标。例如,星号的 UNICODE 值为 "f069".
在这种情况下,您可以像这样在 CSS 中使用 "after or before" 伪 class:
[input]#img_src::before {
font-family: 'FontAwesome';
content: '\f069'
}
这将在任何输入按钮文本之前(在本例中)放置一个超赞的星号。如果您希望按钮只显示图标,只需不要输入任何输入文本,只需使用伪 classes 来处理仅使用 CSS.[=11= 的超棒图标的分布]
希望对您有所帮助。
.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>