向CSS文件动态添加多个自定义图标字体

我有一个html表单生成器，比如。在此表单生成器中，用户只能从列表中选择字体图标。我喜欢它，但我需要添加新的选项，用户可以添加自定义字体图标，并使用它

为了实现这个选项，我尝试这样做，但我遇到了一个问题

在下载的自定义图标字体文件中存在一个

style.css

文件，我将其内容添加到我的网站css文件中（我有一个css文件，不能为自定义图标文件添加两个css文件），如下所示：

@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";
}

如果用户生成具有相同内容的多个图标字体（

“\e901”

），如下所示：

.icon-comprehensive:before {
  content: "\e901";
}

.icon-document-center:before {
  content: "\e901";
}

并使用此html文件：

<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)

有什么办法吗

---

提前谢谢。

我为您找到了解决方案

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";
}

和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

//具有.icon1类的第一个字体图标
//具有.icon2类的第二个字体图标

感谢您的回答，但我无法添加新类，如

icon1

和

icon2

，因为这些名称不是唯一的，可能在css文件中存在，并会产生冲突。没有其他方法，Been in一次只能选择一个字体系列，其中包含许多后退字体。而且，对于多个具有字体系列选择的图标，不能有相同的内容代码。

<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