Overlay several Icons #871

wants to merge 1 commit into from

6 participants


Added a Class to Overlay several Icons.
Example: http://jsbin.com/ijubuv/23/edit


Even by simple reason overlay class should be named icon-overlay or icon-overlaid. Because all classes in bootstrap or even fon-awesome that adjust icons start with prefix icon-.

I am not sure if this is going to be accepted but I think right name is important.

Fort Awesome member

I'll look into this for 3.1.0.


I think this is to much to be included in font awesome. When would this be useful?


I think this is really useful. E.g. whenever you want to display an icon to add/remove/delete/save some kind of object, - for example it would be great to be able to overlay the plus icon on top the user icon for an 'add user' action.


Yeah but that can easily be solved by adding it to your own less/css. Why not keep font-awesome as small as possible?


Fair point but

a) this is something that applies to many projects
b) there are probably a few fiddly cross-browser issues
c) it will only be about 100 bytes extra on the CSS


I think if it applied to many project some more of the 13k who have starred this repo would have been here vouched for it :)


Haha touché!


Here's my vote, and how I implemented it in the less file for my site:

.stack-icon {
    position: relative;
    display: inline-block;
    [class*=" icon-"] {
        position: absolute;
        top: 0px;
        left: 0px;
.stack-icon .stack-icon-base {
    position: relative;

Maybe someone smarter than me can make it smaller...it's already tiny.

I chose to name it stack-icon, so I could use the attribute selectors without stepping on the wrapper class position rules. If I had my way, anything that wasn't an icon would have a class that didn't start with icon- (ahem, icon-spin)

Fort Awesome member

This feature is already in 3.1.0-wip branch.

@davegandy davegandy closed this May 9, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment