Add glyphicon to headings

Question

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?

Answer 1

According to your HTML just add the CSS:

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