Michael Michael - 2 months ago 8
CSS Question

Troubleshoot to design a button with icon

I try to design a button.
I have this anchor:

<li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i> sites</a></li>


Here how it looks:

enter image description here

I need to change the look above to make sites word down the tree.Here the desired result:

enter image description here

Please help me to achieve it.

Answer

Just place a <br> tag between icon and text. And let the <a> tag center it`s content. Something like this should work:

<li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a></li>