[英]No Font-Awesome icons on buttons will vertical-align
所以我有一个带有一些按钮的应用程序,上面有一些“真棒”图标。 这些按钮位于Bootcards标头中。
<button class="btn btn-primary pull-right ">
<i class="fa fa-pencil" ></i>
</button>
现在的问题是,它看起来像这样:
然后,我还有另一个带有文本的内容,看起来也不正确:
这个具有以下HTML:
<button class="btn btn-success" onclick="publishMessage()">
<i class="fa fa-check"></i>
Publiser
</button>
现在,在四处搜寻之后,我发现vertical-align
应该可以帮助我,但是它什么也没做。 我发现的所有方法都只是在图标周围创建了填充或边距,因此它仍会触摸按钮的底部,但是要大得多。
由于我不太熟悉这种语言,所以我想知道为什么仅添加.fa {vertical-align: middle;}
(或使用我自己的类名)之类的CSS .fa {vertical-align: middle;}
,我需要做什么。
更新:这是一个JSFiddle 。
解决方案很简单。 你应该改变
<i class="fa fa-check"></i>
通过
<span class="fa fa-check"></span>
然后只需使跨度高度等于他的容器。 并利用vertical-align属性。 跨度的CSS
height: inherit;
vertical-align: inherit;
我开发了这个jquery代码,根据设备的类型一次使用一个引导卡样式表,因此您不会错过所需的引导卡样式,也不会得到iOS或android的样式桌面之类的东西。
另外,不要忘了包含bootstrap css文件。
var isMobile = {
Android: function() {
if(navigator.userAgent.toLowerCase().search("android") > -1){
return 'Android';
}
},
iOS: function() {
if(navigator.userAgent.toLowerCase().search("iphone") > -1 || navigator.userAgent.toLowerCase().search("ipad") > -1 ||navigator.userAgent.toLowerCase().search("ipod") > -1){
return 'iOS';
}
},
desktop: function(){
if(!(isMobile.Android()) && !(isMobile.iOS())){
return 'Desktop';
}
},
any: function() {
return (isMobile.Android() || isMobile.iOS() || isMobile.desktop());
}
};
var op = isMobile.any();
console.log(op);
var ios="<link rel='stylesheet' href='cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-ios.min.css'>";
var and="<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-android.min.css'>";
var desk="<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css'>";
if(op == "iOS"){
$(ios).appendTo("head");
}else if(op == "Android"){
$(and).appendTo("head");
}else{
$(desk).appendTo("head");
}
这是一个JSFiddle 。
我知道您有您的答案,但我认为与您的人们分享是很好的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.