CODEWITHSUNDEEP
cssruby-on-rails-4font-awesome
Cristiano Mendonça
Cristiano Mendonça

Reputation: 1282

Rails 4 - Font-Awesome CSS problems

I have an application that uses font-awesome icons.

The problem I'm facing on is the vertical alignment of some icons. More specifically, the icons that aren't being displayed properly are the star, cogs and the lock within this page.

The page that has the elements properly aligned can be found here.

So the question is how can I align the font-awesome elements within the circle's center?

Upvotes: 0

Views: 204

Answers (1)

laymanje
laymanje

Reputation: 833

In your CSS the line-height of .fa is being set to 1.

Since your css is minified, I could not tell if this is custom CSS or the Font Awesome CSS. 

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

If you remove the line-height: 1; the icons will center.

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

If you do not wish to remove the default line-height you can always add a line-height to the .fa-3x class: 

.fa-3x {
  font-size: 3em;
  line-height: 1.9em;
}

Upvotes: 1

Related Questions