按钮上没有Font-Awesome图标将垂直对齐

时间:2015-07-28 12:43:17

标签: html css twitter-bootstrap font-awesome

所以我有一些带有一些按钮的应用程序,它们上面有一些Font Awesome图标。这些按钮放在Bootcards标头内。

<button class="btn btn-primary pull-right ">  
    <i class="fa fa-pencil" ></i>
</button>

现在的问题是它看起来像这样:

Misplaced icon 1

然后我有另外一个带有文字的文字,它看起来也不正确:

Misplaced icon 2

这个有以下HTML:

<button class="btn btn-success" onclick="publishMessage()">
    <i class="fa fa-check"></i>
    Publiser
</button>

现在,经过一些谷歌搜索,我发现vertical-align应该帮助我,但它什么也没做。我发现的所有方法都只是在图标周围创建了填充或边距,因此它仍然触及按钮的底部,但是在一个更大的按钮上。

由于我不熟悉这种语言,我想知道为什么只添加一些像.fa {vertical-align: middle;}(或我自己的类名)的CSS不起作用,以及我需要做什么。

更新:这里是JSFiddle

2 个答案:

答案 0 :(得分:3)

解决方案很简单。你应该改变

<i class="fa fa-check"></i>

通过

<span class="fa fa-check"></span>

然后简单地使跨度高度等于他的容器。 并使用vertical-align属性。 跨度的css

height: inherit;
vertical-align: inherit;

更新: http://jsfiddle.net/uz3tu23s/4/

答案 1 :(得分:0)

我开发了这个jquery代码,根据设备的类型一次使用一个bootcards样式表,这样你就不会错过你需要的引导卡样式,并且你不会得到样式用于桌面或其他东西的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

我知道你得到了答案,但我认为与你分享这些人是件好事。