CODEWITHSUNDEEP
csstwitter-bootstrap
B.B King
B.B King

Reputation: 39

CSS bootstrap: add icon to h1

i add icon(Bootstrap Glyphicons) in h1 but icon not in text baseline. how to fix This?!

Problem pic

Code:

<h1 ><a><i class="icon-play"></i>TEST TEXT</a></h1>

Upvotes: 3

Views: 13148

Answers (3)

user3460493
user3460493

Reputation: 11

Im using Bootstrap v3.2 and I had the same problem.

<h3><span class="glyphicon glyphicon-user"></span> User</h3>

so I changed the display property of the glyphicon from inline-block to inline.

.glyphicon 
{position: relative;
top: 1px;
display: inline;
...
}

This is due the An inline element has no line break before or after it, and it tolerates HTML elements next to it but an inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

Upvotes: 1

Girish Thimmegowda
Girish Thimmegowda

Reputation: 2169

For Bootstrap version 3 use this.

<h1>Hi this is heading<span class="glyphicon glyphicon-star"></span> Star</h1>

See this jsfiddle.

your icon size will change according to size of its parent.

Upvotes: 8

Nurgiel
Nurgiel

Reputation: 180

I would try:

1) changing padding of i.icon-play

2) background-position of i.icon-play

3) vertical-align:center; line-height:12px; of i.icon-play

One of those will work, good luck ;-)

Upvotes: 0

Related Questions