¿Cómo cargar font-awesome usando SCSS?

Para cargar iconos de fuentes impresionantes en SCSS, debe seguir estos pasos:

Instale el kit de inicio de Font-Awesome: vaya al sitio web de Font-awesome y descargue el kit de inicio gratuito para la web.
Cree un proyecto en su directorio: En el directorio de su proyecto, cree 2 carpetas:
- público
- recursos
La carpeta pública contendrá sus archivos html y css, mientras que la carpeta de recursos contiene sus archivos scss.
Ejecute npm init en la terminal: Inicialice npm ejecutando el comando npm init para crear un archivo package.json.
```
npm init
```
Instale node-sass: después de ejecutar el comando npm init, instale una biblioteca llamada ‘node-sass’. Este comando compilará de forma nativa scss a css.
Nota: Node-sass debe instalarse como una dependencia de desarrollo.
```
npm install node-sass --save-dev
```
Cree una carpeta dentro de los recursos: cree una carpeta llamada activos en la carpeta de recursos. Descomprima el kit de inicio font-awesome descargado, copie la carpeta scss y péguelo dentro de la carpeta de activos.
Agregue fuentes web a la carpeta pública: cree un archivo style.css dentro de la carpeta css. Copie la carpeta de fuentes web y péguela en la carpeta pública.
Edite el archivo _variables.scss en la carpeta scss: abra el archivo de variables y edite ‘$fa-font-path’ escribiendo la ruta de la carpeta webfont.
```
// Variables
// --------------------------

$fa-font-path:         "../webfonts" !default;
```
Cree un archivo style.scss dentro de la carpeta scss: cree un archivo style.scss en la carpeta scss e importe una fuente impresionante.
```
@import "fontawesome.scss";
@import "solid.scss";
```

Cree un archivo index.html: cree un archivo index.html en el directorio público y agregue el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <i class="fas fa-thumbs-up"></i>
</body>
</html>

Edite el campo de scripts en el archivo package.json:
```
"scripts": {
    "compile:sass": "node-sass resources/assets/scss/style.scss public/css/style.css -w"
  }
```
Este comando convertirá archivos scss a css mientras realiza un seguimiento de los cambios.
Compila tu código: abre la terminal y usa el siguiente comando:
```
npm run compile:sass
```

Nota: Comente/elimine la línea ‘-ms-filter’ si encuentra el siguiente error en el archivo style.css después de la compilación.

Publicación traducida automáticamente

Artículo escrito por ashitace696 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta