I tried,
<div class = "btn-group" style="display:inline;">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-star-o" aria-hidden="true"></span> Rate
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
</ul>
</div>
The problem with this is that the text link has a gradient around it which I don't like. How can I disable the gradient using CSS or is there some elegant way to do this? For some reason, copying this in jsfiddle doesn't work.