1

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.

Ali Soltani
  • 9,589
  • 5
  • 30
  • 55

1 Answers1

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
Zahidul Islam Ruhel
  • 1,114
  • 7
  • 17
  • Thanks for answer but I can't add new classes like `icon1` and `icon2` because these names isn't unique and may have them in css file and makes conflict. – Ali Soltani Oct 31 '17 at 06:15
  • there is no alternate way, become in can select only one font-family at a time, with many fall-back font. and you can't have same content code for more then one icon with a font-family selection. – Zahidul Islam Ruhel Oct 31 '17 at 07:11