字體真棒使用字型

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。