Font-awesome: Icon Overlays (add, remove, edit...) [DO NOT +1]

[gossi]

STOP! ✋

Read this comment: :point_right: https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-80275327 :point_left:

Dave's response: https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-77691722

---

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
https://github.com/FortAwesome/Font-Awesome/issues/902#issuecomment-35353168

[AlainD-]

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.

[AlainD-]

Hi there really no plan to add this issue to the milestone 5.0.0 ?
Thanks.

[Cfuzz]

+1, I have used custom CSS to achieve this in the past

[dcampagnolo]

5027

I had the necessity to combine icons to have different "Actions" per "Entity" . My solution is the following:

The action's icon can be also animated (for example the last two users). It would be great to have it as a standard feature.

You can edit the property text-shadow to get an effect like this:

Some example:

<style>
    .awesomeEntity, .awesomeAction {
        color: white; 
    }
    .awesomeEntity {
        text-shadow: 2px 3px 5px black;
    }
    .awesomeAction {        
        font-size: 120%;
        margin: 40% 0px 0px 50%;
        text-shadow: -1px 0 black, 0 2px 3px black, 2px 0 3px black, 0 -1px black;
    }
    /* awesomeBlue */
    span.awesomeBlue i {
        color: #2E5888;
    }
    span.awesomeBlue i.awesomeAction {
        text-shadow: -1px 0 white, 0 2px 3px black, 2px 0 3px black, 0 -1px white;
    }
</style>

<span class="fa-stack">
   <i class="fa fa-user fa-stack-2x awesomeEntity" />
   <i class="fa fa-spinner fa-spin fa-stack-1x awesomeAction" />
</span>
<span class="fa-stack awesomeBlue">
   <i class="fa fa-user fa-stack-2x awesomeEntity" />
   <i class="fa fa-search fa-stack-1x awesomeAction" />
</span>

[nyon]

+1
Another proposed solution (for add and remove):

.fa-add-action
{
    position: relative;
}

.fa-add-action:after
{
    display: block;
    position: absolute;
    content: "\f055";
    font-size: 90%;
    margin-top: -50%;
    margin-left: 50%;
    background-color: white;
    border-radius: 100%;
}

.fa-remove-action
{
    position: relative;
}

.fa-remove-action:after
{
    display: block;
    position: absolute;
    content: "\f056";
    font-size: 90%;
    margin-top: -50%;
    margin-left: 50%;
    background-color: white;
    border-radius: 100%;
}

[AlainD-]

The solution of @nyon does not work on IE8 !

[tagliala]

I'm assigning this one to me for 5.0.0 but the cutout should not be doable automatically :disappointed:

I need a list of icons that would benefit from add/delete, like icon-user

[craigh]

I need a list of icons that would benefit from add/delete, like icon-user

ideally any icon should be usable in this way because one can simply not know what a site designer would like to combine. add a star? subtract a chart? duplicate a comment? other additions beyond add/delete need to possible as well. really the overlay of _any_ two icons. IMO

[tagliala]

@craigh

other additions beyond add/delete need to possible as well. really the overlay of any two icons. IMO

I just spoke with @davegandy . Apparently there is no way to automatically cut out icons as described here: https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-38353600

An icon which includes icon-user + icon-add should be considered a new one. In other words, overlaying any two icons means that he should create and maintain n² icons.

There are good css hacks like this one: #5027 to accomplish this

Apparently, at the moment a list is the best we can offer.

Of course I will leave this open and move my todo list in a new request

[craigh]

@tagliala - what about simply using the shadow effect as described in #5027?

or simply an easy method of overlay with the assumption of using a different color as I showed above

[AlainD-]

Strange that you are currently working on this topic, as I was working since a couple of days on a prototype proposal to submit to your team. The idea is to create smaller icons, referenced as badges, and used them with the stackings. So for instance, having a set of bottom badges, always put at the same position in the bottom right corner of a the svg canvas. That way, all the icons will be placed at the same place.

In order for you to understand, i published my prototype. Let me know what you think, and if we can go in that direction.
Here is the link on github: https://github.com/AlainD-/font-awesome-badge
Or directly to the demo page: http://alaind-.github.io/font-awesome-badge/

Regards,

[tagliala]

@AlainD- nice workaround, but all the proposals (including mine) are actually workaround, not solutions to this issue.

I will move right now the to-do list in another thread and leave this open for discussion. Feel also free to start a wiki on this topic linking to your project.

The suggested css-only approaches have several issues that must me clear for anyone interested

• need of multiple stacked icons
• no transparency (imagine those icons in a button with linear-gradient)
• IE8 and IE9 do not support text-shadow
• hard to fit at 14px icon size
• no pixel perfection at 14px
• it mainly works with circular icons

Since we can't cutout the main icon, IMHO the best workaround at the moment is still to provide a minimal set of icons which will benefit of + / x overlays. Then if there are special needs css-only workarounds and custom sets will do the job

[AlainD-]

What do you mean @tagliala by "benefit of overlay" ? It is not very clear how you intent to achieve this?

[tagliala]

@AlainD- sorry, I'm not an English native speaker. Please take a look here: #5883

[AlainD-]

Edit: I moved my comment to #5883.

[tagliala]

Recap

There are many proposals to approach this issue. Since the target is to stack any icon on any icon, some approaches will not work and others will have drawbacks. No silver bullets here at the moment.

Said so, please do not +1 this request: take a look at this comment and pick up the solution that will better fit your needs

Approach 1: Make new icons by hand

This approach is not viable at the moment, because it requires to desing and maintain n² icons

Pros:

1. Transparency
2. Pixel perfect
3. Simple markup (<span class="fa fa-user-add"></span>)

Cons:

1. Requires n² icons.
2. Huge icon and stylesheet files.

Approach 2: Automagically make new icons

:arrow_right: https://github.com/nyon/fontawesome-actions

Pros:

1. Transparency
2. (Almost) Pixel perfect
3. Simple markup (<span class="fa fa-user-add"></span>)

Cons:

1. Customization requires skills and time
2. Huge icon and stylesheet file size.
3. Not as good as handmade icons

---

Approach 3: Stack with text shadow

:arrow_right: http://jsfiddle.net/tagliala/wvquLyo9/
:arrow_right: #5027

Pros:

1. Transparency

Cons:

1. No pixel perfection at 14px
2. No support for IE8 and IE9 http://caniuse.com/#feat=css-textshadow
3. Complex markup (stack)
4. Non-transparent contours around overlay icon

---

Approach 4: Stack with badges

:arrow_right: http://alaind-.github.io/font-awesome-badge/

Pros:

1. Pixel perfect

Cons:

1. No transparency
2. Poor IE8 support
3. Can't stack any icon on any icon
4. Very complex markup (stack with more than 2 icons)

Note: This approach will not solve this issue (you can't actually stack any icon on any icon)

---

Approach 5: SVG cut

:arrow_right: http://jsfiddle.net/tagliala/d42m5/

Pros:

1. Transparency
2. Will actually stack any icon on any icon including a cut-out as described here: https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-38353600

Cons:

1. No pixel perfection
2. Poor browser support
3. Ugly rendering
4. Extremely complex markup

[nyon]

Is there some way to automate Approach 1 (as it is the best)? I think a small specification file containing the positions of +, - and X per icon is sufficient to provide enough information for a program to automatically create such icons. I don't know how to do the icons by manual, so this is just a guessing.

[tagliala]

@nyon even if we can automate the process, the icon file size and the css size would increase accordingly, 1 is definitely not the way to go.

[ptbello]

@tagliala unless you also provide a UI for people to download their custom icon set by choosing any standard icons plus any custom overlays.
Which would be quite a lot of work; on the other hand I think it would hold as a paid-for service.

[nyon]

Okay, I think I found an automated way to produce icons with plus (or other fontawesome icons) on it. Here is the first prototype (positioning is not perfect atm...).

If interested and allowed by @davegandy I could create a repository containing several plus'd, minus'd and whatever'd icons as a "bloated" font awesome is not wanted by everyone. Would that be okay?

[AlainD-]

Some plus icons do match for every main icons. For instance, using the plus-circle on the bookmark, it's hard to guess that this is bookmark under. Sometimes, fa-plus fits better, sometimes fa-plus-circle.
Besides, for some icons, sometimes it's best to place the plus at the bottom, sometimes it's best to place it at the top. For instance here, I think it has more sense to place the plus at the top corner of the bookmark icon.

=> Automatization then does not really apply for all of them. Unless as there is a description for each of them to decide the location of the plus/times icons.

[nyon]

Okay, second try:

[AlainD-]

hum.. Nice! The draft result is not bad.
Would you mind explaining your process? It could be a nice (temporary) alternative to some users, while wainting for the final decision.

[nyon]

I used fontforge for the automated process. It opens the font file and parses all glyph data. Then you can apply transformations and do basic boolean operations (intersect, except, union).
I think I could open a repository pushing the script file I use. Be aware, that installing fontforge means a lot of binary dependencies... :grin:

[tagliala]

@nyon please share

take also a look here #5883

[nyon]

https://github.com/nyon/fontawesome-actions

I will create an installation and usage guide later.

[tagliala]

@nyon thanks!

[nyon]

@tagliala Updated my repo with newest files and found a way to automatically create all webfont files.

Feel free to test the fonts in different browsers.

[vlipman]

In case it is useful to give one additional use case - we would love badge-like icons to help us communicate status information for a fairly large set of various objects. For example, primary status indicators would be:

• error (perhaps an "x" in a red circle)
• warning (perhaps a "!" in a yellow orange triangle or a circle)
• ok (perhaps a checkmark in a green circle)

I was imagining something like this (which looks pretty similar to what both AlainD and nyon are showing):

Thank you for the fantastic icons!

[nyon]

Color is not possible in font icons, but we could outline the X. I think it is a good idea to add this as an option to the generation script. I will see what I can do. Thanks for your feedback.

[AlainD-]

I think that for that matter, stacks apply. IMO, each single font icon must remain unicolor.

[nyon]

@vlipman
First test of your idea:

HTML:

<span class="fa-stack">
  <i class="fa fa-picture-o-minus-alpha fa-3x fa-stack-1x"></i>
  <i class="fa fa-picture-o-minus-beta fa-3x fa-stack-1x" style="color: #01FF70;"></i>
</span>

I'll upload it as soon as i can. I think I must introduce a "fa-action-stack" class as the original stack class sets width to 2em which looks awkward since the icons are most of the times wider than 2em.

[tagliala]

@nyon can you add -slash to overlays?

eg: http://fontawesome.io/icon/bell/ http://fontawesome.io/icon/bell-slash/

[nyon]

@tagliala Unfortunately there is no slash in fontawesome I could use. So its another type of overlay I have to introduce. But i will give it a try and post it here, if I got something to show.

[nyon]

@tagliala What do you think about these? First is the real fa-bell-slash, the following are all auto generated. I add this to my repository.

[tagliala]

@nyon good job, thanks!

I'm going to add #3691 to 5.0.0 milestone to have a more consistent slash (note that decision about icons are up to Dave). I will also link your project in other requests

[st-keller]

wow - cool - sometimes dreams come true - thanks!

[nyon]

@tagliala Yes a more consisten slash would be very helpful. The current slash is calculated with the bounding box of the glyph, which is sometimes incorrect so that the slash is too big...

@st-keller Indeed ;)

[AlainD-]

Again, nice work @nyon it's amazing! :+1:
Is it too much to ask additional options such as question and info, ban, star, refresh ? :-)
I don't know if any icon can be used with your script to create an action? I'm thinking also of lock, unlock-altfor instance.

Thanks.

[AlainD-]

@nyon, I just saw you already added the new actions! oO I'm impressed, well done :-).
I was wondering though how the transformation is applied though on the icons. There is indeed a small black line in the interspace between the dot and the line of the question and info actions. If you look at fa-filter-info and fa-filter-question from the revision https://github.com/nyon/fontawesome-actions/commit/53ba7a6af449c00148381b0338c17d5e08d3f9cc the defect is obvious.

[nyon]

@AlainD- Thanks. No it is not too much. Just 2 minutes of work. I added question, info, ban, star and refresh and recompiled the icon set (~1100 glyphs generated). Yes you can combine any icon with any icon as you wish. The issues with font aliasing is due to the fact that the transformation is done via subpixels. I think I could fix that by setting pixels to whole numbers or adjust the scale value a bit. I do some testing and present my results then.

I think this issue is getting offtopic. If you want some things added to fontawesome-actions you could use the issue tracker of my repository. I don't think most of the automatically created icons will be merged into this font (1100 added glyphs at the moment).

[Anachron]

Why not just use somethiing like this?
http://jsfiddle.net/kuajqc0d/6/

I made this quick and dirty using SemanticUI, but the idea should be pretty clear.
You won't need all that CSS.

[tagliala]

@Anachron https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-80275327

[Anachron]

@tagliala so IE8/IE9 support will be existing for how long more?

[nyon]

@Anachron despite the fact that IE8/9 got some problems with your solution there are two other issues:

• contours are not perfect as you can see in this picture (Firefox)
  
• contours are colored and not transparent. As a result you cannot use them on gradients or image backgrounds

[tagliala]

@Anachron everyone should pick up the best choice for their needs. I'm just trying to list pros and cons of each approach

@nyon you are right. You don't lose transparency with text-shadows but you have the above issue. I will update my comment

[tagliala]

@nyon given that IMHO your approach at the moment is the best solution and Dave could help about pixel perfection for a subset of icons (e.g: smaller + / x), could you describe your approach like I did for other ones in https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-80275327 ?

[nyon]

@tagliala If I get you right, my approach is your approach 1. I automated the process of creating icons with a python script. All assets are then created automatically (converting to eot, woff, woff2, otf, ttf and svg, manipulating css stylesheet, minify css stylesheet). You just have to give the combinations of glyphs (so its not n² but n*m). The increase in file size for ~1100 extra glyphs is indeed significant (for woff2: 56,8 kB -> 81,3 kB and min.css: 23,7 kB -> 68,2 kB), but most of the browsers are caching these font and css files, so this extra size is only downloaded once per session (and ~140 kB once is not that much of bandwidth).

[Anachron]

@nyon and your approach would not allow coloring like this:
http://jsfiddle.net/kuajqc0d/8/

I guess it's kinda hard to make it useable for everyone :)

[nyon]

@Anachron Of course it is, see the readme of my repo:

<span class="fa-stack">
  <i class="fa fa-folder-plus-alpha fa-2x fa-stack-1x"></i>
  <i class="fa fa-folder-plus-beta fa-2x fa-stack-1x" style="color: #F012BE;"></i>
</span>

[Anachron]

@nyon oh, blind me!
How can you add more than one additional icon to the fa-stack?

[nyon]

@Anachron Is this a general question or does it relate to the code above?

[Anachron]

@nyon general question to your solution.

[nyon]

@Anachron In fact, it consists of only two icons:

These are stacked and can be easily colored seperately. Does this answer your question?

[Anachron]

@nyon not really, what if I want to have both a plus and an exclaimation mark?
(The mark on the top-left, plus on the bottom-right side of the original icon,- or something similiar?)

[nyon]

@Anachron This is not possible at the moment. I could create a set of new combined icons which combine two operators (exclamation mark and plus). This would inflate the font again (but that would be ok). What is your use case? I think it would be the best for your issue to be posted on my repository, as it does not directly deal with this issue.

[Anachron]

@nyon @tagliala I think it would be good to make this stuff optional as it "really bloats the font-awesome package". The implementation of stackable icons/overlays should be switchable.

[MrFusion42]

Yeah, I think that we can have the best of two worlds by having an _"advanced download"_ where you can customize the font-awesome set, but where some overlays are not auto-generated.

There could be two sections:

1. Choose the main icons that should be included (all of them or the most popular ones by default). Also, selecting/deselecting complete categories is possible.
2. Add custom stacked icons. For each one:
   
   
   
   • Choose from a dropdown your main icon
   
   
   • Choose from a dropdown the overlay icon, where the most common ones are at the top (e.g. plus, minus, settings, etc)
   
   
   • Select the glyphs to be added (Compound and/or separate for individual coloring)
   
   
   • Preview the stacked icons right there
   
   

Here's a quick mockup I made (most functionality is missing, but you get the idea).

Additionally, this "customizer" could collect data on what's being downloaded, so the most used icons and stacked icon combinations are identified.

From this data, the most popular icon stackings could be replaced, if needed, by manually edited ones (for example, suppose the user-config stacked icon becomes very popular and it could use some of the artist's touches, so the server is then instructed to return a custom version instead of the auto-generated one).

Edit: Forgot to mention that the ones that _are_ auto-generated, can be done in back-end (and then cached) by @nyon's excellent algorithms.

[AlainD-]

@MrFusion42 although this is an excellent idea, I am not sure it could be *officially released by the Fontawesome team (my personal opinion here). Indeed, even if in most of the common use cases, the icons look OK, in some particular cases, the stacking requires some additional adjustments for the final icon to be perfectly fine (post process manual modifications, etc...).

In your proposal, since you take the whole set of icons, to be combined with, again, the whole set of icons, the rendered icon could be problematic with some combinations. For that matter, I am pretty sure the team want to avoid a series of request from the users for icons not initially intented to be combined together (my personal opinion here again).

Unless, using your solution, we can restrict to subset of icons, which we are sure have been tested fine and validated (but that's a lot of tests :-) )

[MrFusion42]

@AlainD- some ideas regarding this:

1. When the user chooses an "untested" combination, a warning could be shown, indicating that the combination might look bad and to use it under the user's own risk.
2. Along with the warning, there could be "rating" buttons where users say "this looks good" or "this needs fixing". The collective ratings could then be seen by admins in order to more easily promote combinations as "tested" or to spot the most requested combinations that need fixing.
3. There could be a filter to "Show only tested combinations", "Show tested and highly rated combinations" or "Show all combinations". Perhaps the second one is the default (only the bold and adventurous users dare to use the last one).
4. Some icon overlays could have its own custom logic, and even be exclusively overlays. Some examples:
   
   
   
   • Slashed icons, as mentioned by @tagliala and implemented by @nyon
   
   
   • "Remote" overlay (little wi-fi-like waves at the corner). Imagine mixing it with icons like file, play, database, camera, user, phone, print, hdd, headphones, etc.
   
   
   • "Broken" icons. I realize that this might be a lot harder to implement, but it could still work with some icons (perhaps intersect a zig-zag line along the vertical axis, slightly rotate the right half). Might be better with the opaque or outlined icons (e.g. broken heart, folder, envelope, comment, star, square, cloud, file, glass, ...)
   
   

[tagliala]

Please do not +1 this request

[idontusenumbers]

It might help if you give a reason why people shouldn't +1 this request.

[tagliala]

@idontusenumbers

Here: https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-80275327

Unfortunately there is nothing here a +1 can do. I'm keeping this open for discussion

[lyhil]

make it official... combining icon like that, with some class to be icon smaller and in corner in fa-stuck..

yeah and it will be absolutely perfect it it was possible to change size of fa-stuck - I am not using it, because it making all icons bigger than others

and I dont want to make some crazy solution which will not goes with FA in future

[My1]

I must say that this is pretty epic, especially what @nyon did, also the Idea with the custom download is great and the mockup as well, except for one thing: a CDN link for each and every custom fontawesome package is plain impossible, since fontawesome probably only has limited space in their CDN, that stuff is (depending on the scale) pretty expensive. this should be more like custom bootstrap, meaning you get your stiuff to download and a config fil if you need it again or wanna tweak some stuff...

[nyon]

@My1 Thanks. Perhaps some day I find time to create such configurator. The problem I have is to create an UI that is intuitive. The backend part should be easy. If someone got time and would create a ready to use frontend like @MrFusion42 did, I could code the backend part. I just need a POST request with all combinations wanted by the user.

[My1]

well the UI could be made with js and bootstrap (not my stuff, since I am not really a person that uses js, and literally has a noscript for almost anything that might be needed) also rather than the UI I thik one of the larger problem is to design a proper POST request (I often used some imploded arrays, aka pretty long strings since multiple things are hard to impossible to send away from one part of an application to another in many places), but yeah @MrFusion42 's mockup was exceptionally nice. and it looks easy to use, if it worked.

[MrFusion42]

@nyon feel free to use any or all parts of the mockup I made. Here's the source: http://codepen.io/MrFusion42/pen/yydGOd

[eis-os]

Can actions be defined like unicode non-space characters?

http://www.unicode.org/charts/PDF/U0300.pdf

All Action would need a common outline and place, say a circle.

This would reduce the possible icons from icons x actions to (icons+iconswithaction) + (actions x 2)

Actions would be defined as normal "icon glyph" for html overlay
and as a combining character glyph. So the content actually is a combined character

.@{fa-css-prefix}-folder-action-edit:before { 
  content: @fa-var-folder-withaction @fa-var-combining-action-edit;
}

Maybe the creation for the "withaction" glyphs could be automated with a method nyon uses...

[nyon]

@eis-os Nice idea, but is it possible to do subtractive operations with these characters? I guess, it isn't. The problem with having actions combined with normal icons is, that we cannot automatically create transparent outlines. This is why no solution works, which only is able to do additive operations (like CSS overlays or stacking).

[eis-os]

No, only combining, subtracting would be a bit overkill in font drawing.

This would work only with a common basic shape, like if the actions are drawn like plus-square, minus-square, phone-square, pencil-square (or circle variants) in a smaller variant.

And the underlying glyph has a form, with a common cut out for *-square-action.

For calender-*-o, the middle part could be done with combining.
Then you could combine these with folder-o and get folder-plus-o, folder-minus-o, folder-times-o

folder-image-o variant (A media folder) would be done with combing the internal part of the file-*-o variants.

[tagliala]

@eis-os could you please provide a fiddle with an example of your approach?

[eis-os]

Hmm, would need to create a complete test font to play with offsets.

Maybe this here will show the basic idea using unicode failbacks::
http://jsfiddle.net/a2sxr21o/1/

Technical two unicode chars are used and fused together.

[My1]

also with those 2 different characters, if used properly you could give them seperate colors, see fontawesom-action by @nyon for that but change it from stack to combining characters...

[eis-os]

Testing my unicode idea with font-awesome as base:

https://github.com/eis-os/fa-actiontest-exp

I would say that only a mixing with less or scss is doable otherwise the css file sizes get way to big.
If browsers support ligatures there could be a better way using content: attr(something)

As there a lot problems with svg sizes while dumping and the icons need room for the action,
I guess creating a complete new font is the only doable way.

@My1 Using css ::first-letter?

[erez-o]

@tagliala, with regards to approach 1 - "Make new icons by hand":

Why has the option to split the css of font-awsome to several files (one for common icons, and additional css files for icons in different categories) been ruled out?

[tagliala]

@erez-o are you referring to a particular issue?

It doesn't seem related to icon overlays

[erez-o]

I'm sorry, I'll elaborate -

If I understand correctly, there isn't currently a solution better than approach 1.

I don't think n^2 new icons would need to be created, but even ~10*N might be too many as well.

Isn't the main limiting factor total number of fonts in font-awsome? Are there issues relating to splitting font-awsome and why it has been ruled out?

[tagliala]

There is a request to split fontawesome into packs, you can take a look at #1322

Font Awesome Black Tie separates icons from brands and this could be an option for Font Awesome

[sam0x17]

Any suggestions for doing a new folder icon? Will anything from this ever get merged?

[kdiogenes]

Inspired by this post and #3640 I'm getting the following result:

You can view it online here: http://jsfiddle.net/rp6wswa7/2/

I also uses font-awesome-rails and inspired by it's helpers I write the following one:

def fnix_fa_sub_icon(names, sub_names, options = {})
  options[:icon_options]   ||= {}
  options[:sub_options]    ||= {}
  options[:sub_bg_names]   ||= 'circle fnix-sub-bg'
  options[:sub_bg_options] ||= {}

  fa_private_helpers = FontAwesome::Rails::IconHelper::Private
  container_classes = fa_private_helpers.icon_names('fnix-container').concat(Array(options.delete(:class)))
  names = fa_private_helpers.array_value(names).push('fw')
  sub_names = fa_private_helpers.array_value(sub_names).push('fw', 'fnix-sub')
  icon = fa_icon(names, options.delete(:icon_options))
  sub_icon = fa_icon(sub_names, options.delete(:sub_options))
  if options[:sub_bg_options][:style]
    sub_bg_names = fa_private_helpers.array_value(options.delete(:sub_bg_names)).push('fw', 'fnix-sub')
    sub_bg_icon = fa_icon(sub_bg_names, options.delete(:sub_bg_options))
  end
  icons = [icon, sub_bg_icon, sub_icon]
  icons.reverse! if options.delete(:reverse)
  text = options.delete(:text)
  right_icon = options.delete(:right)
  layered_icon = content_tag(:span, safe_join(icons), options.merge(:class => container_classes))
  fa_private_helpers.icon_join(layered_icon, text, right_icon)
end

With this helper the fiddle above is generated with the following:

%p
  = fnix_fa_sub_icon 'envelope-o', 'exclamation inverse', sub_bg_options: { style: 'color: #f0ad4e;' }
  = fnix_fa_sub_icon 'envelope-o', 'refresh spin'
  = fnix_fa_sub_icon 'envelope-o', 'times inverse', sub_bg_options: { style: 'color: #d9534f' }
  = fnix_fa_sub_icon 'envelope-o', 'check inverse', sub_bg_options: { style: 'color: #449d44' }
%p
  %button.btn.btn-default= fnix_fa_sub_icon 'envelope-o', 'exclamation inverse', sub_bg_options: { style: 'color: #f0ad4e;' }
  %button.btn.btn-default= fnix_fa_sub_icon 'envelope-o', 'refresh spin'
  %button.btn.btn-default= fnix_fa_sub_icon 'envelope-o', 'times inverse', sub_bg_options: { style: 'color: #d9534f' }
  %button.btn.btn-default= fnix_fa_sub_icon 'envelope-o', 'check inverse', sub_bg_options: { style: 'color: #449d44' }
.btn-group
  %button.btn.btn-default.btn-sm= fnix_fa_sub_icon 'envelope-o', 'exclamation inverse', sub_bg_options: { style: 'color: #f0ad4e;' }
  %button.btn.btn-default.btn-sm= fnix_fa_sub_icon 'envelope-o', 'refresh spin'
  %button.btn.btn-default.btn-sm= fnix_fa_sub_icon 'envelope-o', 'times inverse', sub_bg_options: { style: 'color: #d9534f' }
  %button.btn.btn-primary.btn-sm= fnix_fa_sub_icon 'envelope-o', 'check inverse', sub_bg_options: { style: 'color: #449d44' }

[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