Add glyphicon to headings

问题

Like in this answer I'm trying to add icon to h3 tag. Here is a result:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Play it! <span class="glyphicon glyphicon-play text-primary"/></h1>

Also jsfiddle available.

But inside h3 tag the icon becomes too big. I would prefer something like this:

How can I make the icon smaller?

回答1:

According to your HTML just add the CSS:

h1 span.glyphicon-play{
    font-size: 0.5em;
    vertical-align: 5px;
}

回答2:

Change the font-size of the glyphicon

h1 .glyphicon {
font-size:.5em;

}

JSfiddle Demo

回答3:

<h1>Play it! <span class="glyphicon glyphicon-play" style="font-size:15px;"></span></h1>

Try This code

回答4:

There are many possible ways, one way is to write css for it, as mentioned in the above replies. Another possible way is using <small> tag. This would be answer if you don't want to dynamically decrease the font-size in css. Another solution is to give it a new class btn-sm especially if this is a button.

http://jsfiddle.net/agqqft99/10/

回答5:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Play it! <span class="glyphicon glyphicon-play text-primary"/></h1>

来源：https://stackoverflow.com/questions/30434707/add-glyphicon-to-headings