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

¿Cómo usar SASS en FontAwesome?

2019-02-06 08:30:00

<p>FontAwesome es como su nombre lo dice una fuente maravillosa que te brinda todos los iconos habidos y por haber tal como los iconos de las redes sociales, iconos de empresas, iconos de objetos entre otros, pero no solo trae esta cantidad de iconos tambi&eacute;n trae consigo diversas herramientas para ser utilizadas por cualquier "lenguaje" o "pseudoc&oacute;digo" que la web (Y escritorio) ofrezcan al publico en su versi&oacute;n 5.7.1.&nbsp;</p> <p>En este tutorial te ense&ntilde;are como implementarlo de la mejor manera usando una "nueva" tecnolog&iacute;a llamada SASS.</p>

Sass CSS

¿Cómo usar SASS en FontAwesome?


FontAwesome es como su nombre lo dice una fuente maravillosa que te brinda todos los iconos habidos y por haber tal como los iconos de las redes sociales, iconos de empresas, iconos de objetos entre otros, pero no solo trae esta cantidad de iconos también trae consigo diversas herramientas para ser utilizadas por cualquier "lenguaje" o "pseudocódigo" que la web (Y escritorio) ofrezcan al publico en su versión 5.7.1. 

En este tutorial te enseñare como implementarlo de la mejor manera usando una "nueva" tecnología llamada SASS.

Descripción


Como bien la introducción lo menciona describiré la forma más fácil de usar e implementar SASS en tu website sin necesidad de tener un compilador en tu hosting ;)

Pero antes que nada llega una incógnita a este tutorial:

¿Qué es SASS?

SASS es el mejor ayudante para el desarrollador web a la hora de trabajar en CSS gracias a sus múltiples funcionalidades: mixins, variables, funciones, herencia, nesting.

www.ondho.com Citado de la web www.ondho.com
 

¿Qué veras en este Post?

1) Te enseñare la forma en que puedes posicionar los documentos privados y públicos, esto con el fin, de que el usuario no vea sino solo el compilado del SASS por ende solo el CSS.

2) Utilizaremos los archivos SASS que FontAwesome nos ofrece y lo modificaremos a nuestro gusto.

3) Optimizaremos el proceso de carga del CSS generado.

Más información

Instrucciones


  1. Primero que todo,

    Descarga los archivos mencionados Aquí
    Si no sabes cómo descargar los archivos, mira cómo hacer lo Aquí
    . Estos enlaces ayudaran al proceso de este post.

  2.  A continuación expondré los tópicos principales que hacen parte de este post, dividiré las secciones para que así no haya ninguna confusion en el proceso.


1) Localización de los archivos SCSS y CSS


La pregunta principal es: ¿Por qué poner separados la ubicación de estos archivos?

 

Principalmente se realiza por seguridad ya que la adquisición de estos archivos o en un caso extremo la modificación de los mismos puede alterar nuestro código fuente en este caso el estilo de nuestra web. En segundo aspecto, a la hora de compilar los procesos se encuentra un directorio de compilación y un directorio del producto (Esto infiere una buena organización).

 

Para esto debemos de tener dos carpetas en la misma raíz, ejemplo:

Carpeta principal WWWROOT
Carpeta de Fuentes y Archivos Sass (Scss) FontAwesome
Carpeta de compilación CSS

 

Quedando de la siguiente manera:

-> Main Folders <-


En la carpeta FontAwesome Insertaremos los siguientes archivos, para obtener estos archivos, descarga el archivo FONT AWESOME que te brindo en los enlaces de este post la cual es la ultima version de fontawesome (guiño, guiño).

Al extraer encontraras dos archivos rar más, descomprime el archivo que por nombre lleva fontawesome-(guiño)-5.7.1-web, el cual sera el que necesitaremos para poder realizar todo proceso en nuestra web. Realizando este paso nos encontraremos con lo siguiente:

-> Main Files <-

Pero simplemente vamos a dejar las únicas dos carpetas marcadas (Scss y WebFonts) ya que las otras las tocaremos en otro post 😉.

Ahora: Dentro de la ruta: WWWROOT/FontAwesome/scss crearemos una sub-carpeta más donde alojaremos los documentos un tanto "inmutables", esta nueva carpeta la llamamos immutable o cualquier nombre que desees.

En ella (la carpeta immutable) posicionaras todos los archivos que comiencen con _ (guion al piso).

-> Immutable Files <-


Tener en cuenta

Ya que se ha cambiado de lugar estos archivos (sea puestos en tu hosting o manipulados desde los archivos por parte de cPanel (public_html)) tenemos que actualizar la ruta frente a la ubicación de las fuentes o WebFonts que son necesarias para que así sean visibles los iconos.

Ingresamos a: WWWROOT/FontAwesome/scss/inmutable/_variables.scss

Dentro de este archivos ubicamos el destino de nuestra carpeta WebFonts:

(Si tienes como una raíz principal la carpeta WWWROOT) 

Explicación: Esta dirección es dirige a todo componente o todo icono al tipo de fuente utilizado, se escribe /WWWROOT/ ya que al compilar tomara nuestro dominio y extension más la ruta a usar; Ejemplo: https://supermavster.com/WWWROOT/.........


Recordar: El CSS generado lo veremos un poco más adelante pero la carpeta ya esta posicionada.

 

 

2) Modificación


Basados en el paso anterior, en la carpeta scss tendremos un archivo llamado fontawesome.scss lo renombramos como _all.scss para que a la hora de compilar no se genere este archivo, ya que este, es oculto para el usuario.

->  <-

Ingresamos al archivo _all.scss y añadimos la siguiente ubicación a cada Include que aparece ahí:

Ejemplo:

Ahora, renombramos los demas archivo llamado incluyendole un guion al comienzo tal como el _all.scss

Ejemplo: solid.scss por _solid.scss

(A cada archivo que veas).


En la carpeta actual (SCSS) exceptuando a _all.scss eliminaremos de cada archivo que puedas ver la linea

y dejando el resto de contenido en dichos archivos.


Creamos un archivo llamado font-awesome.scss en este nuevo archivo añadiremos las siguientes lineas:

Nota: Este último paso hará que solo y exclusivamente se compile el contenido que haya dentro del archivo font-awesome.scss generando como resultado un archivo que contenga todos los iconos y diversas fuentes de font awesome, en un archivo que por nombre tendrá: font-awesome.css

Quedando como resultado la siguiente estructura de archivos:

->  <-

Con esto, ya se tiene toda la configuración normal frente a la base de sass para fontawesome de una manera un tanto organizada.

(Esta carpeta estará como ejemplo en los links de este post)

Compilación


Para compilar yo uso Visual Studio Code con una extensión llamada: Live Sass Compiler (link en este post). La cual simplemente presionando un botón me compila automáticamente todo cambio que le haga y todo archivo SASS (tal como font-awesome.scss) de manera automática y generando directamente el CSS.

Simplemente cortas el archivo generado (font-awesome.css) y lo pegas en la carpeta CSS de WWWROOT, luego vas a llamar esa dirección en tu mediante un link de la siguiente manera:


Pero si deseas usar NodeJS puedes ver el siguiente enlace: Compilar SASS El cual brinda una excelente guía de la compilación a partir de un comando.

Usando Mixins


Puedes crear tus propias "clases" de sass con los únicos iconos que necesites de la siguiente manera, creando un archivo digamos: example.scss y en el añadir las siguientes lineas:

Nota:

Puedes usar @include fa-icon; para configurar las cosas como un ícono. 

Se utiliza @extend .fas; para crear un icono en el estilo Sólido. 

 

supermavster.com

Enlaces de: ¿Cómo usar SASS en FontAwesome?

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!