Add multiple custom icon fonts to CSS file dynamically - css

Question

I have a html form generator like this. In this form generator users only can select a font icon from list. I did like it but I need to add new option that user can add custom font icons and uses it.
For implementing this option I try to do it like The Beginner's Guide to Icon Fonts in WordPress but I encountered a issue.
In downloaded custom icon font files exist a style.css file that I added content of them to my website CSS file (I have one CSS file and I can't add two css file for custom icon file) like this:
#font-face {
font-family: ico1;
src: url('fonts/ico1.eot?411a7m');
src: url('fonts/ico1.eot?411a7m#iefix') format('embedded-opentype'),
url('fonts/ico1.ttf?411a7m') format('truetype'),
url('fonts/ico1.woff?411a7m') format('woff'),
url('fonts/ico1.svg?411a7m#ico1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: ico2;
src: url('fonts/ico2.eot?gz3b2b');
src: url('fonts/ico2.eot?gz3b2b#iefix') format('embedded-opentype'),
url('fonts/ico2.ttf?gz3b2b') format('truetype'),
url('fonts/ico2.woff?gz3b2b') format('woff'),
url('fonts/ico2.svg?gz3b2b#ico2') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: ico2, ico1 !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
If user generates multiple icon fonts with same content ("\e901") like below:
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And uses this html file:
<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)
Only the first one ("ico1") is applied for both of i tags. I think this issues related to
font-family: ico2, ico1 !important;
Is there any way to do it?
Thanks advance.

Answer 1

I found a solution for you.
i {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1{
font-family: ico1 !important;
}
.icon2{
font-family: ico2 !important;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And in HTML:
<i class="icon1 icon-comprehensive"></i> // First font icon with .icon1 class
<i class="icon2 icon-document-center"></i> // Second font icon with .icon2 class