CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
Esso
Esso

Reputation: 764

No Font-Awesome icons on buttons will vertical-align

So I have this app with some buttons, that have some Font Awesome icons on them. These buttons are placed inside a Bootcards header.

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

Now the problem is that it looks like this:

Misplaced icon 1

Then I have this other one with text, which doesn't look right either:

Misplaced icon 2

This one has the following HTML:

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

Now, after some googling around, I found that vertical-align should help me out, but it simply does nothing. All approaches I've found simply creates paddings or margins around the icon, so that it still touches the bottom of the button, but on a much bigger button.

Since I'm not that familiar with this language, I wonder why just adding some CSS like .fa {vertical-align: middle;} (or with my own class name) does not work, and what I need to do.

UPDATE: Here's a JSFiddle.

Upvotes: 2

Views: 988

Answers (2)

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

I developed this jquery code to use one bootcards stylesheet at a time according to the type of the device, so you won't miss the bootcards styling that you need it, and you won't get the styling of the iOS or the android for the desktop or something.

Also , don't forget to include the bootstrap css file.

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");
}

Here's a JSFiddle.

I know that you got your answer, but i think that it's good to share that with you people.

Upvotes: 0

andrescpacheco
andrescpacheco

Reputation: 696

The solution is simple. You should change 

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

by 

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

Then simply make the span height equal to his container. And make use use of vertical-align property. css for the span

height: inherit;
vertical-align: inherit;

Update: http://jsfiddle.net/uz3tu23s/4/

Upvotes: 3

Related Questions