字体真棒使用字型

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属性加载字体文件。并创建一个字体图标的自定义类。以上不起作用。它未能加载相应的图标。相反，它显示吧

Answer 1

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

When I tried your code in 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"; 
} 

Answer 2

如果您正在寻找FontAwesome那么你很可能在寻找这个 -

<link rel="stylesheet" id="champion-fontawesome-css" href="wp-content/themes/bla/inc/font-awesome-4.7.0/css/font-awesome.min.css?ver=4.7.3" type="text/css" media="all"> 

如果您正在寻找加载自己的自定义字体，然后尝试这个 -

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

@font-face { 
    font-family: 'FFDINRoundWebPro'; 
    font-weight: 700; 
    src: url('assets/fonts/3103D9_1_0.eot'); 
    src: url('assets/fonts/3103D9_1_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_1_0.woff2') format('woff2'), url('assets/fonts/3103D9_1_0.woff') format('woff'), url('assets/fonts/3103D9_1_0.ttf') format('truetype'); 
} 

@font-face { 
    font-family: 'FFDINRoundWebPro'; 
    font-weight: 500; 
    src: url('assets/fonts/3103D9_2_0.eot'); 
    src: url('assets/fonts/3103D9_2_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_2_0.woff2') format('woff2'), url('assets/fonts/3103D9_2_0.woff') format('woff'), url('assets/fonts/3103D9_2_0.ttf') format('truetype'); 
} 

@font-face { 
    font-family: 'FFDINRoundWebPro'; 
    font-weight: 300; 
    src: url('assets/fonts/3103D9_3_0.eot'); 
    src: url('assets/fonts/3103D9_3_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_3_0.woff2') format('woff2'), url('assets/fonts/3103D9_3_0.woff') format('woff'), url('assets/fonts/3103D9_3_0.ttf') format('truetype'); 
} 

正如你所看到的，对于每个字体重量，我使用相同的font-family名称创建另一个@ font-face。