2013-07-30 139 views
0

我已經完成了儘可能多的搜索谷歌和在這裏,因爲我可能在發佈之前,所以請原諒,如果這很容易回答。也許這只是我遲到的地方,我不知道。爲什麼我的網站上沒有加載我的網絡字體?

該網站是http://artofbackpacking.com

不管我做什麼,在右上角的網頁字體不加載。你會看到我有e001,e002等。他們在我的開發環境中工作,但不在我的現場。字體來自icomoon.io,我使用了那裏建議的CSS。我也嘗試了Base64代碼,但那也沒用。

下面是我在CSS中獲得的一小部分內容。

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

感謝幫助。

回答

1

你忘e000之前把\,試試這個:

.social-feed:before { 
    content: "\e000"; 
    background: #FF6600; 
} 
.social-feed:before hover { 
    content: "\e000"; 
    background: #000; 
} 
.social-twitter:before { 
    content: "\e001"; 
    background: #00aced; 
} 
.social-facebook:before { 
    content: "\e002"; 
    background: #3b579d; 
} 
.social-instagram:before { 
    content: "\e003"; 
    background: #dbd2c3; 
} 
.social-pinterest:before { 
    content: "\e004"; 
} 
.social-google-plus:before { 
    content: "\e005"; 
    background: #c12026; 
} 
.social-youtube:before { 
    content: "\e006"; 
    background: #ff3333; 
} 

如何使用圖標字體:http://gomakethings.com/icon-fonts/

+2

世界是一個更好的地方,因爲stackoverflow。 – Michael

1

它看起來像你有你的路徑不正確我得到404的字體網址。嘗試只用「/wp-content/fonts/socialFontsMichael.woff」例如這似乎是一個有效的URL給我

1

你有文件名(大寫)問題或文件夾的權限:。

控制檯錯誤:

Console Errors

嘗試改變的「字體」的許可文件夾,或者可能的原因是字體的文件名以大寫的「socialFontsMichael」,將其更改爲小寫字母,如「socialfontsmichael」

+0

感謝Arbaoui。我已經修復了路徑和權限,但它們仍然沒有顯示。我沒有得到那些控制檯錯誤。 – Michael

相關問題