Overlay several Icons #871

Closed
wants to merge 1 commit into from

6 participants

@rollbrettler

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

@Serhioromano

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.

@davegandy
Fort Awesome member

I'll look into this for 3.1.0.

@andriijas

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

@marcusgreenwood

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.

@andriijas

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

@marcusgreenwood

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

@andriijas

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 :)

@marcusgreenwood

Haha touché!

@stutteringp0et

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-"],
    [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)

@davegandy
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