css - 如何使用多种 Icomoon 字体(多种字体系列)

Question

如果您只有一个字体系列，Icomoon 字体工作正常，但是如果我创建了另一个字体系列并想与第一个一起使用怎么办？我试图做这样的事情:

@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
  url('icomoon.woff') format('woff'),
  url('icomoon.ttf') format('truetype'),
  url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'abccons';
  src:url('fonts/abccons.eot');
  src:url('fonts/abccons.eot?#iefix') format('embedded-opentype'),
  url('fonts/abccons.woff') format('woff'),
  url('fonts/abccons.ttf') format('truetype'),
  url('fonts/abccons.svg#abccons') format('svg');
  font-weight: normal;
  font-style: normal;
}

我的字体文件名与字体系列完全相同。另外，我对第一个字体图标使用“data-icon”属性，第二个使用“data-icon2”。

[data-icon]:before { content:attr(data-icon); font-family:'icomoon'; font-variant:normal; font-weight:normal; line-height:1; speak:none; text-transform:none; -webkit-font-smoothing:antialiased; }

[data-icon2]:before { content:attr(data-icon2); font-family:'abccons'; font-variant:normal; font-weight:normal; line-height:1; speak:none; text-transform:none; -webkit-font-smoothing:antialiased; }

不确定我是否以正确的方式做。字体以 http://css-tricks.com/html-for-icon-font-usage/ 中描述的方式加载.结果是:第一个字体正确加载，而第二个似乎已经加载了一些东西，但都显示为方形，而不是字体。如果我在 css 文件中设置为 data-icon2 但在 html 中使用 data-icon3(打算出错)，则不会加载任何内容。

任何的想法？

Answer 1

检查路径.....有一个关于如何使用 Icomoon 图标的漂亮教程
http://chipcullen.com/how-to-use-icomoon-and-icon-fonts-part-1-basic-usage/ .它会帮助你