且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

图标字体:它们如何工作?

更新时间:2023-11-22 23:37:40

Glyphicons are images and not a font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-images:

Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content property, for instance:

@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";
}

As the content property isn't supported in older browsers, these also make use of images.

Here's an example of completely raw FontAwesome in use as a font, turning  ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2