Question

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

为了实现这个选项，我尝试像The Beginner's Guide to Icon Fonts in WordPress那样做，但我遇到了一个问题。

在下载的自定义图标字体文件中存在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";
}

如果用户生成多个具有相同content（"\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)

只有第一个（"ico1"）适用于i个标记。我认为这个问题与

有关

font-family: ico2, ico1 !important;

有什么办法吗？

谢谢你。

Answer 1

我为你找到了解决方案。

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

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

1 个答案: