使用圖標字體與CSS的問題

我是網頁設計和開發的新手，並且一直在玩弄不同的造型技巧。在我的研究過程中，我遇到了圖標字體。儘管我已經調查過很多教程和視頻，但儘管花費了很多時間，我仍然無法成功使用圖標字體。使用圖標字體與CSS的問題

首先，我去了一個網站，提供大量的圖標字體，選擇我喜歡的，生成它們，最後將它們下載到一個文件夾中。但是現在這些圖標字體在一個文件夾中，我該怎麼辦？

2012-10-29 Wil Prim

使用它就像一個正常的字體： http://www.font-face.com 找出哪些字符對應你想用哪個圖標（嘗試字體冊/字符閱讀器） – FeifanZ

的http：// inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/對於它的價值，我建議不要這樣做。當你使用帶有圖標的字體時，你的背後有非常真實的文字。如果它不是文本，它不應該使用字體。總有精靈，矢量圖像等 – Brad

感謝您的意見。 inspire48，它的工作原理，但它會工作，即使用戶沒有安裝該字體？和布拉德，我會看看那些謝謝你 –

這裏是一個分步指南：

轉到Font Squirrel並下載@font-face套件。將其解壓縮，將其重命名爲'字體'，並將其放在與您的html文件相同的目錄中。

使用此爲您的HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
    @font-face { 
    font-family: 'ModernPictogramsNormal'; 
    src: url('fonts/modernpics-webfont.eot'); 
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/modernpics-webfont.woff') format('woff'), 
     url('fonts/modernpics-webfont.ttf') format('truetype'), 
     url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
    } 
    li { 
     list-style-type: none; 
    } 
    [data-icon]:before { 
     font-family: 'ModernPictogramsNormal'; 
     content: attr(data-icon); 
     speak: none; 
     padding:0 5px; 
    } 
    </style> 
</head> 
<body> 
    <ul> 
    <li data-icon="^">RSS</li> 
    <li data-icon="*">Star</li> 
    <li data-icon=".">Shopping Cart</li> 
    </ul> 
</body> 
</html>

你應該看到這一點：

Icon Font Example

你滾！

另外，要知道要使用什麼字符，請查看字體松鼠站點上的字符映射表。

來源

2012-10-29 22:09:26 bookcasey

太棒了！所以爲了更多的知識，爲什麼在@ font-face中有這麼多url（）？那些鏈接到他們所有的字體？或不同的格式？ –

不同的瀏覽器需要/能夠使用不同種類的字體文件（我知道.eot適用於IE，.svg適用於iOS等）。最好包括他們。 – bookcasey

如何識別哪個'data-icon'屬性是哪個符號，而我只有文件有一些'unicode'屬性和一些對'd'的值。我無法理解這一點？ – Ammar

使用圖標字體與CSS的問題

回答

相關問題