使用字体真棒字体

Question

我正在寻找这样的东西

 @font-face {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style : normal;
         src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
         src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}

 <a class="myClass" href="#">This is a link</a>

我想使用 CSS 属性加载字体文件。并为字体图标创建自定义类。以上没有工作。它无法加载相应的图标。相反，它显示栏

原文由 ranjith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试打开 Javascript 控制台并将出现在那里的错误消息添加到您的问题中。

当我在 JSFiddle 中尝试您的代码时，它所需要的只是让 maxcdn 链接成为基于 SSL 的 HTTP S 链接，而不是不安全的 HTTP 链接。

这可能是您问题的解决方案，但如果没有控制台错误输出，则很难判断。

 @font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}

原文由 Joseph Marikle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

请注意，如果在您的页面中包含 font-awesome.min.css （如 Font-awesome 的 文档 中所述），那么它已经在文件的开头包含以下 @font-face ，您将不会’ 需要添加你自己的：

 @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
  url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
  url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
  url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
  url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

原文由 Hooman Bahreini 发布，翻译遵循 CC BY-SA 4.0 许可协议