Multiple class prefixes

[Tom McQuarrie]

On the feature request war path today! Just wanted to request something that would save us some time with regards to quick usage css generation.  We want to offer our clients a range of icon sets to choose from.  Icon fonts are perfect for this as you can simply swap out a css file and suddenly all your icons change without touching the html.  The problem arises though when we want to display all those icon sets on the one page for the client to choose from.

Say you have an icon called "icon-contactus" and you want to create 3 icon sets with that icon.  All those icon sets will need to have the same "icon-" class prefix, with a class name of "contactus" on the icon, so when you swap out the css, the icon still applies.  To make all 3 sets coexist on the one page, I thought I'd just add a second class name to each icon, so each icon is referred to as either "icon-contactus" or "icon-setN-contactus".  

But if you add all 3 css files to the page, and 3 icons, as below, you'll find only the last icon works, because each set uses a different font file and the first 2 icons have been overridden to use icon set 3 because they all have the 'icon-' prefix.

<i class="icon-set1-contactus"></i>
<i class="icon-set2-contactus"></i>
<i class="icon-set3-contactus"></i>

icon set 1 css:

[class^="icon-"], [class*=" icon-"] {
 font-family: 'iconset1';
}

icon set 2 css:

[class^="icon-"], [class*=" icon-"] {
 font-family: 'iconset2';
}

icon set 3 css: Only the last will survive!

[class^="icon-"], [class*=" icon-"] {
 font-family: 'iconset3';
}

If the class prefix field allowed comma separated values, and outputted multiple sets of css rules, then I could set the class prefix for the set to "icon-, iconset1-" (being careful not to use "icon-set1", which would match the first prefix), and produce css something like:

icon set 1 css:

[class^="icon-"], [class*=" icon-"],
[class^="iconset1-"], [class*=" iconset1-"] {

 font-family: 'iconset1';
}

.icon-contactus:before,
.iconset1-contactus:before {

 content: "\f081";
}

icon set 2 css:

[class^="icon-"], [class*=" icon-"],
[class^="iconset2-"], [class*=" iconset2-"] {

 font-family: 'iconset2';
}

.icon-contactus:before,
.iconset2-contactus:before {

 content: "\f081";
}

html:

<i class="iconset1-contactus"></i>
<i class="iconset2-contactus"></i>
<i class="iconset3-contactus"></i>

With this approach the resulting icon set css files could be used both combined and standalone.  The way I'm getting around things currently is by having one big icon set with all variations for client display purposes, and the 3 individual sets for use on websites, but it gets pretty unwieldy when we're using some custom designed vectors and have to re-apply any positioning and sizing changes multiple times in the different sets.

I don't want to request things just to suit our unique workflow, but this does seem like something many people would try to accomplish. Could also be used to combat backwards compatibility issues if you decide to change your icon naming conventions.