圖標字體：它們是如何工作的？

我明白，圖標字體只是字體，你可以通過只調用他們的類名來獲取圖標，但如何做圖標字體的工作？圖標字體：它們是如何工作的？

我已經試過檢查在Chrome加載相關的圖標字體資源，看圖標字體的顯示方式圖標（相比於一般的字體），但我一直無法弄清楚如何發生的。

即使有負載icon fonts available，我也一直沒有找到關於如何完成「圖標字體技術」的資源。也有大量的資源顯示圖標字體可以如何integrated，但似乎沒有人共享或寫作關於如何這是完成！

2013-03-19 Vivek Chandra

Glyphicons是images和不是的一種字體。所有的圖標都子畫面圖像（也可作爲單獨的圖像）內發現，它們被添加到元件定位backround-image S：

Glyphicons

實際字體圖標（FontAwesome，例如）做涉及下載特定字體和利用content屬性，例如：

@font-face { 
    ... 
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
     url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'), 
     url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); 
    ... 
} 

.icon-beer:before { 
    content: "\f0fc"; 
}

由於content財產isn't supported在舊的瀏覽器，這些也利用images。

下面是用作字體完全原始FontAwesome的例子，把（＆＃xf0f9; - 你可能無法看到這個！）入救護車：http://jsfiddle.net/GWqcF/2

來源

2013-03-19 15:13:29

http://stackoverflow.com/questions/12379153/can -i-add-color-to-bootstrap-icons-only-using-css - 答案說 - 它的基本字體 – 2013-03-19 15:28:28

FontAwesome圖標**是**字體。我甚至在我的回答中提到了FontAwesome，並且繼續說他們如何處理瀏覽器，這些瀏覽器不支持將圖標添加到頁面的CSS方法。 – 2013-03-19 15:31:08

那麼字體圖標如何工作？ - 字體如何呈現爲圖標？ - 帶有字體圖標 - 下載的精靈？ – 2013-03-19 15:32:59

如果你的問題是如何CSS類可以插入一個特定的字符（即將呈現爲在特殊字體的圖標），看看在source for FontAwesome：

.icon-glass:before { content: "\f000"; } 
.icon-music:before { content: "\f001"; } 
.icon-search:before { content: "\f002"; } 
.icon-envelope:before { content: "\f003"; } 
.icon-heart:before { content: "\f004"; }

所以一個CSS內容指令用於插入字符（這是從Unicode的專用保留區域，不會混淆其他讀者）。

來源

2013-03-19 15:13:44 Thilo

如何web字體圖標工作

網絡字體圖標通過使用CSS注入特定字形到 HTML中使用內容屬性的工作。然後，它使用@ font-face加載樣式化注入的字形的dingbat webfont。結果是，注入字形的成爲所需的圖標。

首先，您需要一個帶有您需要的圖標的webfont文件，或者爲特定ASCII字符（A，B，C，！，@，＃等）定義的或專用區的Unicode字體，這是在字體空間，不會因在Unicode特定的字符中使用的編碼字體。

在這裏你可以瞭解如何創建web字體圖標 - >link

來源

2017-01-13 17:55:14 artamonovdev

檢查這一點，它完全使用CSS

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
    <style> 
    .battery.icon { 
     color: #000; 
     position: absolute; 
     margin-left: 2px; 
     margin-top: 6px; 
     width: 13px; 
     height: 7px; 
     border-radius: 2px; 
     border: solid 1px currentColor; 
    } 

    .battery.icon:before { 
     content: ''; 
     position: absolute; 
     right: -3px; 
     top: 1px; 
     width: 2px; 
     height: 3px; 
     border-radius: 0 2px 2px 0; 
     border-top: solid 1px currentColor; 
     border-right: solid 1px currentColor; 
     border-bottom: solid 1px currentColor; 
    } 

    .battery.icon:after { 
     content: ''; 
     position: absolute; 
     left: 1px; 
     top: 1px; 
     width: 8px; 
     height: 5px; 
     background-color: currentColor; 
    } 


    </style> 
</head> 

<body> 

<div class="battery icon"></div> 
</body> 
</html>

來源

2017-02-07 21:46:34 Sashi

這是回答什麼？ – Ryan 2018-01-25 00:24:35

圖標字體：它們是如何工作的？

回答

相關問題