How can I decrease the size of my fontawesome glyph icon in my twitter-bootstrap site without messing up the alignment?

Question

On the following web page which is under construction, you will see a white box next to the company name at the top left here

This is a twitter-bootstrap based site and the white box "glyph icon" from FontAwesome. I cannot seem to reduce the size of the white box (maybe 25% or so would be desirable) without having the icon fall out of alignment with the company name. Could you please "view source" on the site and see if you are able to determine the right code change?

Answer 1

Here is a solution for your problem. Add line-height: 28px; and change padding-top to 8px to the .navbar .brand class in custom.css file. And then add the following css

.navbar .brand .icon-sign-blank
{
font-size: 75%;
padding-bottom: 4px;
display: inline-table;
vertical-align: bottom;
}

in custom.css file. It will align the fontawesome icon to the baseline of the brand name. Hope it helps to fix the issue that you are facing.