图标字体：它们是如何工作的？

我明白，图标字体只是字体，你可以通过只调用他们的类名来获取图标，但如何做图标字体的工作？图标字体：它们是如何工作的？

我已经试过检查在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

图标字体：它们是如何工作的？

回答

相关问题