FB Google + Twitter YouTube RSS Patreon
  1. Home
  2. Post
  3. css-implement-fontawesome

¿Cómo implementar FontAwesome sin perder carga de tu WebSite?

2017-07-02 22:39:41

Quieres implementar la fuente de iconos para tu web, pero no deseas solamente llamarlas (Hacer una instancia mediante un < link /> ), ya que esto realiza un gran consumo de datos. Pues si es así en este post te enseñaré la forma correcta de implementarlo.

Tutorial CSS

¿Cómo implementar FontAwesome sin perder carga de tu WebSite?


Quieres implementar la fuente de iconos para tu web, pero no deseas solamente llamarlas (Hacer una instancia mediante un < link /> ), ya que esto realiza un gran consumo de datos. Pues si es así en este post te enseñaré la forma correcta de implementarlo.

¿Qué haremos?


Te dare la mejor explicación para poder añadir los iconos a tu web, este tutorial también se aplica a toda fuente que desees añadir a tu Web. 😀
Entonces como una idea general de lo que haremos será primero llamar los archivos necesarios que contienen los iconos y simplemente vamos a añadir los iconos que realmente necesitamos, porque si únicamente implementamos un < link /> nos cargara todos los códigos basura por decirlo (basura en cuanto al sentido que no lo utilizaremos pero si lo tendremos ahí), e implementaremos el código necesario reutilizando las etiquetas.

Instrucciones:


  1. Descarga el ejemplo  Aquí
  2. Si no deseas descargarlo sigue estos pasos,   lo cual es lo mismo que el archivo, pero si quieres una idea más concreta descarga el archivo.
    1. Descargamos las fuentes de la página oficial   Aquí
    2. Seguidamente las añadiremos a nuestra carpeta puede ser la ruta:  ../css/fonts/
    3. Vamos a añadir el siguiente código encima de la etiqueta < /head> ,  el cual contendrá las librerías de los iconos.

      Podemos realizar una modificacion en cuanto al anterior codigo en donde puedes cambiar el tamaño y el estilo a:

      O un cambio a un más extremo es dejar solo una librería la cual puede ser  woff2, ya que por su carga comprimida nos ayuda a optimizar nuestro Sitio Web
    4. Ahora incluiremos las fuentes necesarias a nuestro código (Código CSS), el cual son los iconos que utilizamos, ya es tu criterio, qué código utilizaras.

      He añadido dos de los iconos que más uso, los cuales los puedes eliminar y puedes añadir tus iconos:
    5. Para añadir tus iconos nos vamos a la página oficial   Aquí.
    6. Nos dirigimos a la Sección de Iconos,
      buscaremos nuestro icono
      y abriremos la página del icono.
    7. Ahora simplemente copiamos el nombre del icono y su Unicode,
      lo reemplazamos en el siguiente formato:

      Reemplazando  NAME_ICON con el nombre establecido en la página del icono y  CODE_ICON reemplazandolo por el Unicode, copiamos nuestro nuevo icono y lo añadimos  debajo del comentario:
    8. Ahora para poder usar este nuevo icono, en donde queramos utilizarlo, vamos a llamarlo:

      o simplemente:

      Para una explicación más breve con ayuda de la anterior explicación (4 punto),   sería así, reemplazando NAME_ICON  por el nombre que añadimos a nuestra código:
    9. Demostración:
  3. ¡Disfruta!, si tienes alguna duda o pregunta hazmelo saber en los comentarios.

supermavster.com

Enlaces de: ¿Cómo implementar FontAwesome sin perder carga de tu WebSite?

Contraseña:

¿Cómo descargar?

  1. Desactive cualquier Adblock o bloqueador de publicidad que poseas.
  2. Presione el botón de '' que se encuentra en el panel de Links de todos los posts (ventana 1).
  3. Se abrirá una nueva pestaña (ventana 2).
  4. Deja que se cargue por completo la nueva ventana (ventana 2).
  5. En la nueva pestaña que apareció (ventana 2):
  6. Al realizar el paso anterior, volver a la pestaña en la cual presiono el botón (ventana 1), para así, ver los links de descarga.
  7. Comenzara un contador regresivo el cual, durante unos segundos, desencriptara los links.
  8. 🙈¡Disfruta!🙊

Mavster

¡Hola soy Mavs!, el orgulloso creador de este sitio web, estaré actualizando el sitio web constantemente, a su vez publicando nuevos contenidos y revisando tus comentarios o acciones en esta web, igualmente, Gracias por visitar a Supermavsters.com, cualquier duda o inquietud no olvides comentarla en su post correspondiente.


¡Suscríbete a Supermavster!

¡Suscríbete y podrás recibir las mejores noticias y ofertas de Supermavster, directamente en tú Emial!