css - Stack bootstrap glyphicons -


i'm using following bootstrap icon

class="glyphicon glyphicon-plus" 

and want change color of button , use following want plus icon in circle ,how should that? enter image description here

    i.glyphicon {         color: white;     } 

another icon package called font-awesome has better flexibility , feature of stacking icons together. bootstrap 3 containing glyphicons don't have options took out css font-awesome , adopted glyphicon.

the html looks like:

<span class="glyphicon-stack"> <i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i> <i class="glyphicon glyphicon-plus glyphicon-stack glyphicon-stack-1x"></i> </span> 

the main css:

.glyphicon-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; }  .glyphicon-circle{ position: relative; border-radius: 50%; width: 100%; height: auto; padding-top: 100%; background: black; }  .glyphicon-stack-1x { line-height: inherit; }  .glyphicon-stack-1x, .glyphicon-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } 

for styling of icons (color, size), can create more css class properties , add respective icons.

have @ example.


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -