css - creator - Icon Fonts: ¿Cómo funcionan?
svg icons css (4)
Entiendo que las fuentes de iconos son solo fuentes y que puede obtener los iconos simplemente llamando a su nombre de clase, pero ¿cómo funcionan las fuentes de iconos?
He intentado verificar los recursos de fuentes de iconos relacionados cargados en Chrome para ver cómo los íconos de iconos muestran íconos (en comparación con fuentes generales) pero no he podido averiguar cómo sucede esto.
Tampoco he podido encontrar recursos sobre cómo se realiza esta "técnica de fuentes de iconos", aunque hay muchas fuentes de iconos disponibles . También hay muchos recursos que muestran cómo se pueden integrated fuentes de los iconos, pero nadie parece estar compartiendo o escribiendo sobre cómo se hace esto.
Cómo funcionan los iconos de Webfont
Los íconos de Webfonts funcionan al usar CSS para inyectar un glifo específico en el HTML usando la propiedad de contenido. Luego usa @ font-face para cargar un dingbat webfont que estiliza el glifo inyectado. El resultado es que ese glifo inyectado se convierte en el ícono deseado.
Para comenzar, necesitará un archivo de WebFont con los iconos que necesita, ya sea definido para caracteres ASCII particulares (A, B, C,!, @, #, Etc.) o en el Área de Uso Privado de la fuente Unicode, que son espacios en la fuente que no serán utilizados por caracteres específicos en una fuente codificada en Unicode.
Aquí puede leer cómo crear el icono de la página web -> link
Mira esto, es totalmente usando 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>
Si su pregunta es cómo una clase de CSS puede insertar un carácter específico (que se representará como un icono en la fuente especial), eche un vistazo a la fuente de 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"; }
Por lo tanto, se usa una directiva de contenido CSS para insertar el personaje (que proviene de un área especial reservada para uso privado de Unicode que no ensucia a otros lectores).
Glyphicons son images y no una fuente. Todos los iconos se encuentran dentro de una imagen de sprite (también disponible como imágenes individuales) y se agregan a los elementos a medida que se colocan backround-image :
Los iconos de fuentes reales ( FontAwesome , por ejemplo) implican descargar una fuente específica y hacer uso de la propiedad del content , por ejemplo:
@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";
}
Como la propiedad de content no es compatible con navegadores más antiguos, también hacen uso de images .
Aquí hay un ejemplo de FontAwesome completamente cruda en uso como fuente, girando  ( - ¡quizás no puedas ver esto!) En una ambulancia: http://jsfiddle.net/GWqcF/2