CSS字體不工作 - 字體圖標顯示爲代碼

Question

這是我的網站： http://sonic3remastered.com/

如果你看一下底部的後續部分，你會看到一些代碼，例如/f0d4，/f081等

這些應該是CSS字體圖標，但它們顯示爲代碼而不是圖標。

HTML

<ul class="ui-social-media color"> 
    <li class="twitter"> 
    <a target="_blank" href="https://twitter.com/sonic3onmobile"><span>Twitter</span></a> 
    </li> 
    <li class="facebook"> 
    <a target="_blank" href="https://www.facebook.com/sonic3onmobile"><span>Facebook</span></a> 
    </li> 
    <li class="google-plus"> 
    <a target="_blank" href="https://plus.google.com/103304727452387042300" rel="publisher"><span>Google Plus</span></a> 
    </li> 
</ul> 

CSS

.ui-social-media li a:before { 
    display: block; 
    font-size: 2em; 
    color: inherit 
} 

.ui-social-media li a:hover { 
    color: #5b5b5b 
} 

.ui-social-media li a span { 
    display: none 
} 

.ui-social-media .facebook a:before { 
    font-family: 'ui-glyphs'; 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    content: "/f0d4" 
} 

.ui-social-media .twitter a:before { 
    font-family: 'ui-glyphs'; 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    content: "/f081" 
} 

.ui-social-media .google-plus a:before { 
    font-family: 'ui-glyphs'; 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    content: "/f0d4" 
} 

我該如何解決這個問題？

我已經打開了Chrome開發者工具並轉到了網絡>字體。字體似乎正在加載，所以我不確定問題是什麼。

Answer 1

當您需要使用反斜槓\時，您正在使用正斜槓/。

改變它，它會解決它。

例

.ui-social-media .google-plus a:before { 
    font-family: 'ui-glyphs'; 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    content: "\f0d4" /* Not "/f0d4" */ 
}