font-face - icomoon - google fonts

¿Cómo uso las fuentes de fontello?

Question

Según una fuente, así es como uso las fuentes de Fontello:

Ahora es trivial hacer un ícono webfont personalizado, exactamente para sus necesidades. Primero, selecciona los iconos que te gusten. Luego, actualice los códigos de glifos (opcional) y descargue su paquete de webfont. ¡Fontello genera todo lo que necesita y luego carga el paquete a través de la página de configuración de este módulo! ¡Es fácil!

Bueno. ¿Ahora que? ¿Cómo invoco uno de sus iconos en mi página web?

Answer 1

Dentro del paquete, hay una carpeta "fuente" y una carpeta "css".

1. Mueve la carpeta de fuentes a tu proyecto. Su proyecto puede verse algo como esto:

   /project-root -- /stylesheets -- /images -- /javascripts -- /font

2. Incluir el css de Fontello. Dentro de la carpeta "css" en el paquete, verás:

   [yourfontname]-codes.css [yourfontname]-embedded.css [yourfontname]-ie7-codes.css [yourfontname]-ie7.css [yourfontname].css

   Para la mayoría de los casos, solo necesitará [yourfontname].css . Incluye esa hoja de estilo en tu proyecto.

3. Dentro de [yourfontname].css está la regla @font-face que importa la fuente. Asegúrese de que las rutas a las fuentes estén apuntando al lugar correcto. Por defecto, buscarán en ../font/ .

4. Para usar sus íconos , agregue class="icon-ICON_NAME" a un elemento en el que desea tener un ícono. Puede ver la lista de nombres de iconos en la parte inferior de [yourfontname].css .

5. Opcional: Fontello coloca un margin-right: .2em en el ícono porque espera que lo use con texto, pero a veces es posible que desee un ícono independiente. Me gusta usar etiquetas <i> para iconos independientes, así que agrego la siguiente regla a la parte inferior del css de Fontello:

   i[class^="icon-"]:before, i[class*=" icon-"]:before { margin: 0; }

   Ahora, si coloca class="icon-ICON_NAME" en una etiqueta <i> , no tendrá ningún margen no deseado.