Entiendo que el icono de las fuentes son sólo fuentes y que usted puede obtener los iconos con sólo llamar su nombre de la clase, pero cómo hacer el icono de fuentes de trabajo?

He tratado de comprobar el icono de la fuente de los recursos cargados en Chrome para ver cómo el icono de fuentes de iconos en pantalla (en comparación general de las fuentes), pero no he sido capaz de averiguar cómo sucede esto.

También he tenido éxito en la búsqueda de recursos sobre cómo este «icono de fuente técnica», se hace, aunque hay un montón de icono de fuentes disponibles. Hay también un montón de recursos que muestra cómo el icono de fuentes puede ser integrado, pero nadie parece estar de compartir o escribir sobre cómo esto se hace!

3 Comentarios

  1. 50

    Glyphicons son imágenes y no una fuente. Todos los iconos se encuentran dentro de una imagen sprite (también disponible como imágenes individuales) y se añaden los elementos posicionados backround-images:

    Icono de las Fuentes: ¿Cómo funcionan?

    Fuente real de los iconos (FontAwesome, por ejemplo) hacer implican la descarga de una fuente específica y hacer uso de la content de la propiedad, 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 el content propiedad no es compatible en los navegadores más antiguos, estos también hacer uso de imágenes.

    He aquí un ejemplo de completamente crudos FontAwesome en el uso como una fuente de inflexión  ( – usted no puede ser capaz de ver esto!) en una ambulancia: http://jsfiddle.net/GWqcF/2

    • stackoverflow.com/questions/12379153/… – la respuesta dice – es básicamente fuentes
    • Los iconos FontAwesome se fuentes. Incluso he mencionado FontAwesome en mi respuesta y ha llegado a decir cómo manejar los navegadores que no soportan su CSS método de adición de los iconos de la página.
    • Entonces, ¿cómo fuente de los iconos de trabajo ? – ¿cómo puede la fuente se representa como iconos ? – con fuente de iconos – son los sprites descargado ?
    • Los iconos son la fuente de caracteres. Como un crudo ejemplo: la letra «Z» podría ser diseñado para parecerse a una maleta, guardado como una fuente y, a continuación, en un sitio web.
    • Lo siento que he cambiado la pregunta – yo estaba bajo la impresión de que la fuente de los iconos y Glyphicons son los mismos. Yo sé cómo sprites de trabajo. Quería saber cómo fuente de iconos trabajado.
    • Así que estás diciendo que todos los iconos son realmente sólo caracteres distorsionados?
    • He aquí un ejemplo de completamente crudos FontAwesome en uso, convirtiendo  en una ambulancia: jsfiddle.net/GWqcF/2
    • sí que es cierto! 🙂 El icono fuentes son como cualquier otra fuente, excepto que los personajes son de estilo a ver como iconos. FontAwesome utiliza un rango de caracteres reservados para «uso privado».
    • Impresionante. Gracias por todos los recursos – se tendrán en él, las cosas son más claras ahora.
    • Mi Navegador, no sólo de la carga de las pequeñas Cajas con, por ejemplo, F0F9 dentro de ella. Por qué?
    • ¿recuerdas el ` carácter? Se han cargado Font-Awesome correctamente?
    • Abrí la jsfiddle de usted, y sólo pequeñas cajas se cargan
    • Puede usted explicar cómo el material de los iconos de la obra. stackoverflow.com/questions/45323577/…
    • Urls de este jsfiddle están fuera de fecha, sólo reemplazarlos con los reales (por ejemplo, https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot y por lo tanto para .woff y .ttf), verá la imagen en la segunda cadena.

  2. 19

    Si tu pregunta es cómo una clase CSS puede insertar un carácter específico (que se muestra como un icono en la fuente especial), echa 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"; }

    Así un CSS contenido de la directiva se utiliza para insertar el carácter (que es de un especial de uso privado área reservada de Unicode que no se mete hasta otros lectores).

    • Lo que hace la diagonal f significa?
    • El f no es parte de él, es sólo el número hexadecimal 15. La barra invertida se inicia la secuencia de escape para un punto de código hexadecimal. \f004 en CSS es como  en HTML.
  3. 9

    Cómo webfont iconos trabajo?

    La Web de fuentes de iconos de trabajo mediante el uso de CSS para inyectar un determinado glifo en el HTML con el contenido de la propiedad. A continuación, se utiliza @font-face para cargar un dingbat webfont que los estilos de la inyección de glifo. El resultado de todo esto es que los que se inyecta el glifo se convierte en el icono deseado.

    Para empezar, usted necesita un web-archivo de fuente con los iconos que usted necesita, ya sea definida por particular ASCII personajes (A, B, C, !, @, #, etc.) o en el Área de Uso Privado de la fuente Unicode, que son espacios en la fuente que no puede ser usado por determinados caracteres en formato Unicode de la fuente.

    Leer más, cómo crear webfont icono en Sensible Webfont Iconos.

Dejar respuesta

Please enter your comment!
Please enter your name here