Hacemos una verificación completa cada una de las reseñas en nuestro sitio web con el objetivo de mostrarte en todo momento información con la mayor veracidad y actualizada.
Solución:
Ok, obtuve ayuda con eso y hubo varios problemas con las rutas que eran el problema principal. Los explicaré aquí en caso de que ayude a alguien en mi posición.
El problema era: de hecho, los archivos de fuentes no se estaban cargando
Los errores: principalmente relacionado con rutas y cómo se comportan brújula y sass con @import
Las correcciones a mis pasos anteriores:
1) No puedes equivocarte en eso …
2) Primero, no coloque la carpeta completa en el directorio css. Cada tipo de archivo debe ir en su directorio, por lo que los archivos .scss en el directorio sass, los archivos de fuentes (.ttf, .woff, etc.) en el directorio css / fonts.
Eso es importante en Sass por la forma en que @import obras. En la referencia de Sass dice
Sass busca otros archivos Sass en el directorio actual y el directorio de archivos Sass en Rack, Rails o Merb. Se pueden especificar directorios de búsqueda adicionales usando la opción: load_paths, o la opción –load-path en la línea de comando.
Pasé por alto eso y coloqué mis archivos .scss en otro directorio y es por eso que con un @import no pudieron ser encontrados. Lo que nos lleva al siguiente punto.
3) Fue una tontería intentar importar un archivo .scss como una url (), lo intenté porque un archivo regular @import no estaba funcionando. Una vez que el archivo font-awesome.scss estaba en mi directorio sass, ahora podía @import "font-awesome/font-awesome.scss"
4) Lo mismo aquí, @import Las rutas son relativas a los archivos .scss y siempre que font-awesome.scss y sus parciales estén en la misma carpeta, no es necesario tocarlos.
5) Eso fue correcto, necesitas cambiar el @FontAwesomePath para que coincida con su directorio de fuentes
6) Seguro que necesitas un ejemplo HTML para probar, así que está bien aquí
7) Eso fue innecesario, ya está en el font-awesome.scss que estoy importando. SECO.
8) Igual que el anterior, también innecesario.
9 y 10) Sí chica, buen trabajo
Entonces, que aprender de esto: compruebe sus rutas dos veces teniendo en cuenta cómo @import en Sass solo se ve (por defecto) en su directorio actual de Sass.
Eso funciona para mi:
-
Ejecute el comando:
npm install font-awesome --save-dev -
Agregue estas líneas a index.scss:
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
Este método funciona, pero tienes que descargar toda la carpeta fontawesome cada vez que configuras un nuevo proyecto y enlazas todos los archivos. Al instalar SASS Ruby Gem, puede evitar el trabajo adicional.
Open Terminal and do:
gem install font-awesome-sass
Remember that you should have administrator rights on your computer.
If you are an administrator and getting this:
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
Try to install as super user:
sudo gem install font-awesome-sass
You’ll need to enter your password.
You should get this if installation was successful:
Successfully installed font-awesome-sass-4.1.0
Parsing documentation for font-awesome-sass-4.1.0
1 gem installed
Next open your sass file and import font-awesome library:
@import "/Library/Ruby/Gems/2.0.0/gems/font-awesome-sass-4.1.0/vendor/assets/stylesheets/font-awesome";
I am a mac user and in my case the gem is installed into this location. You should figure out where it stores on your windows machine.
It’s important to use absolute path. It won’t work if you do:
@import "font-awesome”Because you installed ruby gem, it is not part of compass (as I mistakenly thought in the beginning).
Download fontAwesome from fontawesome.io and unzip it. Copy font-awesome fonts into your css folder under fonts directory. Like here:
Screen Shot 2014-08-28 at 2.14.07 PM
In your .sass add a font-face FontAwesome somewhere on top of the file:
@font-face
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
All set
Now you can use fontAwesome in your project!
Use FontAwesome inline with tag or you can use it via @extend method in your SASS.
Inline method example:
Insert an tag where you need it and add classes .fa (default for all icons) and .fa-[icon-name]
More details about this method you’ll find here
fontawesome website
SASS @extend method example:
$your_selector
@extend .fa;
@extend .fa-camera-retro;
font-family: $verdana;
&::before
font-family: "FontAwesome";
Te mostramos las reseñas y valoraciones de los lectores
Te invitamos a apoyar nuestro trabajo añadiendo un comentario o dejando una valoración te damos la bienvenida.