按钮上没有 Font-Awesome 个图标 vertical-align
No Font-Awesome icons on buttons will vertical-align
所以我有这个带有一些按钮的应用程序,上面有一些 Font Awesome 图标。这些按钮位于 Bootcards header.
内
<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
应该可以帮助我,但它什么也没做。我发现的所有方法都只是在图标周围创建填充或边距,以便它仍然触及按钮的底部,但在更大的按钮上。
因为我不太熟悉这种语言,我想知道为什么只添加一些 CSS 像 .fa {vertical-align: middle;}
(或者用我自己的 class 名字)不起作用,并且我需要做什么。
更新: 这是一个 JSFiddle。
解决方法很简单。你应该改变
<i class="fa fa-check"></i>
来自
<span class="fa fa-check"></span>
那就干脆让span的高度等于他的容器。
并利用垂直对齐 属性。
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。
我知道你得到了答案,但我认为与大家分享是件好事。
所以我有这个带有一些按钮的应用程序,上面有一些 Font Awesome 图标。这些按钮位于 Bootcards header.
内<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
应该可以帮助我,但它什么也没做。我发现的所有方法都只是在图标周围创建填充或边距,以便它仍然触及按钮的底部,但在更大的按钮上。
因为我不太熟悉这种语言,我想知道为什么只添加一些 CSS 像 .fa {vertical-align: middle;}
(或者用我自己的 class 名字)不起作用,并且我需要做什么。
更新: 这是一个 JSFiddle。
解决方法很简单。你应该改变
<i class="fa fa-check"></i>
来自
<span class="fa fa-check"></span>
那就干脆让span的高度等于他的容器。 并利用垂直对齐 属性。 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。
我知道你得到了答案,但我认为与大家分享是件好事。