Icon Overlays (add, remove, edit...) [DO NOT +1]

[gossi]

STOP! ✋

Read this comment: 👉 #1181 (comment) 👈

Dave's response: #1181 (comment)

---

Hey,

many times, you have an icon but you want to overlay it, e.g. with a plus symbol to indicate you want to add something or a minus/trash symbol to remove sth.

This request aims at this kind of use-case: Instead of having only a base in an icon-stack, this issue ask for an overlay (+ the desired icons).

For basic overlay functionality I'd say two icons:

• Add
• Remove

These overlays sitting at a specific position and are significantly (maybe 3/4) smaller so the overlayed icon is still visible.

Your opinions?

[tagliala]

may be related to #1179 ?

[tagliala]

I'm closing this one, please check the referenced issue, I think they are the same thing.

[gossi]

No not really. It is not a specific icon, like a layer icon from the referenced issue. It's more related to icon stacking.

A common use case. You are creating a user-management for your application. So you have a user icon for that. Now for the button to add a user, you may use the user icon and overlay it with an additional icon (like a plus sign) to indicate the add behavior. Same for removing. Maybe a little pen as an overlay to indicate edit behavior.

From the fabulous silk icons: http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png
This would be user_add.png, user_edit.png, user_delete.png
For silk there is a icon for each of these use cases, however the plus icons are repeatedly overlayed over various other icons and filename suffix with _add, _delete, _edit etc. In reality you only need the user icon plus the various overlays and you can combine them in css.

Understandable now?

[tagliala]

sorry, got it now

nice idea!

thanks

[craigh]

I just accomplished something like what is requested here (I think) by doing this:

<style>
    .overlay-lower-right {
        font-size: 60% !important;
        position: relative;
        bottom:-10px;
        right:-10px;
    }
    .my-green {
        color: #51A351;
    }
</style>

<span class="icon-stack icon-4x">
  <i class="icon-comment icon-muted"></i>
  <i class="icon-plus overlay-lower-right my-green"></i>
</span>

and it looks like this:

[oriadam]

+1 --> refer to this comment
#902 (comment)

[alaindeurveilher]

Hi,
I am also very interested in this feature, like the possibility to use the stack of these 3 fa icons: "fa-database", "fa-circle fa-inverse" and "fa-plus-circle" in order to have the same result than a "add database" icon, such as:

The idea is the following:

1. Stack "fa-circle fa-inverse" with "fa-plus-circle" slightly smaller, so that the fa-circle will appears as a surround of fa-plus-circle.
2. Stack "fa-database" big-size, with the first stacked icons small size
3. Position the first stacked icons group in the bottom-rigth-corner.

The idea is then to decline the database icon fa-database in a whole set: add-database, remove-database, database-warning, database-error, refresh-database, download-database, etc...

Or maybe another approach, if it's not possible to stack groups of icons and groups of stacked icons, add a css style in order to create a surrounding on an icon (which will fill by the way the inner part of the icon), something like:
"fa fa-plus-circle text-success fa-surround fa-surround-inverse fa-stack-bottom-right"
which then would be used in the current stacked, extended with the positioning to be defined.
The example would produce something like a green plus-circle surrounded (fa-surround) with black (fa-surround-inverse). Or even fa-surround-danger why not...

Thank you.

[tagliala]

@AlainD- thanks again

[alexweissman]

+1 to the mini-overlays as well. I like @AlainD- 's second method for custom building the stacks.

[tagliala]

I think that FA5 Free with its new SVG Framework does really help for this

https://fontawesome.com/how-to-use/svg-with-js#layering
https://fontawesome.com/how-to-use/svg-with-js#masking

Example: https://jsfiddle.net/tagliala/8oqL3b5p/

[My1]

if there would be a way to do this (mask and layer the icons) in PHP and get the finished SVG on the server-side it would be awesome.

[vammex]

i try to follow the article
and draw the first pen-inside-comment icon
it just does not work, i can see only the pen icon. it seems like fa-transform and fa-mask props are not doing anything.
i downloaded and deployed all necessary css and webfont files into my project, i suspect

[tagliala]

@vammex please note that you need to use the SVG framework to take advantage of the masking feature

[sensibleworld]

Hey folks, wanted to let everyone who is following this thread know that we have a new feature for Pro users called the Icon Wizard: https://fontawesome.com/docs/web/add-icons/icon-wizard