2015-12-10 48 views
0

我爲某些網頁設計使用了一種圖標字體,並且在計算CSS中內容值的準確位置時遇到了一些麻煩。CSS內容和圖標字體 - 您在哪裏找到內容值?

我在已經完成的CSS,對於某些圖標看到,它採用如下:

.icon-facebook:before{ 
    content: '\ea8a'; 
} 

這是所有罰款和花花公子,但我想那個圖標更改爲別的東西,問題是,當我打開我的Mac上的FontBook應用程序的字體,我將鼠標懸停在圖標相同,我得到了以下數據:

Glyph 336 
U + E94F 

沒有人知道如何看一個TTF字體,並得到正確的價值觀,我可以插入一個CSS文件並讓它們正確顯示?

UPDATE:經過淘汰處理後,CSS @ font-face正在調用鏈接的.SVG文件,而不是TTF。在@字體面目前看起來是這樣的:

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

所以,現在的問題是,我怎麼能看一個SVG獲得我會插入一個CSS文件中的含量值,這樣我可以創建一個樣式表從頭開始還是更改內容值以顯示不同的圖標?

+0

你真的看着相同的圖標嗎?也許它是重複的?或者,也許TTF文件版本是不同的?因爲css中的'\ ea8a'與字符映射中的'U + EA8A'相同。 – Gvidas

+0

我正在尋找更改用於不同圖標的圖標。問題是,我有CSS中的內容值,並非所有的字符都被使用,只有六個。實際的@ font-face正在調用幾個字體文件(.eot,.woff,.ttf和.svg),我沒有辦法確定我在CSS中放置了什麼值來將顯示的圖標更改爲我想要顯示的圖標。 PLUS,我想知道如何交叉引用css和字體文件,以便將來可以自定義圖標。 – Murphy1976

回答

3

EUREKA!

如果您使用網絡瀏覽器打開.SVG,然後查看頁面源,您將看到實現此目標所需的所有數據。每個字符將被列爲GLYPH,並且在每個GLYPH中都有一個名爲UNICODE的屬性。

如果您在Web開發人員工具中查看它可能只是顯示爲一個框,但通過查看源代碼,我可以看到該unicode的值。

對我來說,那個facebook圖標的價值是unicode="",正如你所看到的那樣,我正在尋找它的ea8a。通過使用該比較,然後更改我的CSS來保存不同的Unicode值,我可以將內容更改爲我想要的內容。