solid pro fontawesome font error awesome sass compass-sass font-awesome

pro - font awesome sass gem



Usando FontAwesome con Sass (5)

Este método funciona, pero tiene que descargar la carpeta completa de fontawesome cada vez que configure un nuevo proyecto y vincule todos los archivos. Al instalar SASS Ruby Gem puedes evitar el trabajo extra.

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 <i></i> tag or you can use it via @extend method in your SASS. Inline method example: Insert an <i></i> tag where you need it and add classes .fa (default for all icons) and .fa-[icon-name] <i style="margin:12px;" class="fa fa-camera-retro"></i> 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"; } }

Estoy tratando de usar FontAwesome en un proyecto Web Compass. Como no hay documentación específica en la página de FontAwesome , y no estoy usando Bootstrap, he seguido "¿No estoy usando Bootstrap? Instrucciones pero no puede hacer que funcione.

La salida

No obtengo errores específicos, no encontrados o errores de compilación. Simplemente no está mostrando nada, ningún icono o texto. Los archivos de fuentes FontAwesome no parecen estar cargando.

Los pasos que he hecho

  1. Descarga el directorio de font-awesome
  2. Cópialo en la carpeta css de mi proyecto, donde tengo todo mi css compilado: project/css/font-awesome
  3. Importe el archivo font-awesome.scss en mi hoja de estilo sass principal como esta @import url("font-awesome/scss/font-awesome.scss");
  4. Abra el archivo font-awesome.scss y cambie las rutas de importación, de modo que ahora sean relativas a mi archivo compilado css y se parezca a este @import url("font-awesome/scss/_variables.scss");
  5. Abra el _variables.scss parcial dentro del directorio font-awesome / scss y cambie el @FontAwesomePath de la predeterminada a "font-awesome/font/" , para que coincida con el lugar donde se encuentran los webfonts
  6. En mi archivo html, agregué un ejemplo a continuación en la página de ejemplos de FontAwesome , así que agregué un <i class="icon-camera-retro"></i> Some text

  7. En mi archivo sass principal, agregue la declaración @ font-face

    @include font-face (''FontAwesome'', font-files (''font-awesome / font / fontawesome-webfont.woff'', woff, ''font-awesome / font / fontawesome-webfont.ttf'', ttf, ''font-awesome /font/fontawesome-webfont.svg '', svg),'' font-awesome / font / fontawesome-webfont.eot '');

    % icon-font {font-family: ''FontAwesome'', Helvetica, Arial, sans-serif; }

  8. Extender la fuente en el selector.

    .icon-camera-retro {@extend% icon-font; }

  9. Compilar mi hoja de estilo sass principal usando compass --watch sin errores

  10. Subido todo


Para ayudar a aclarar, esta es la estructura de mi proyecto:

root sass mainsass.scss css font-awesome css font-awesome.css font font-archives.ttf/.woff/etc scss _partials (_variables.scss, _path.scss, _core.scss, etc) font-awesome.scss fonts some-custom-font.ttf mainsass.css


Entonces, si alguien ha leído hasta aquí, lo cual ya agradezco, ¿alguna idea, por favor?

Ok, recibí ayuda con eso y hubo varios problemas con los caminos que fueron 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: en su mayoría relacionados con las rutas y cómo compás y sass se comportan con @import

Las correcciones a mis pasos anteriores:

1) No puedes hacer mal en eso ...

2) Primero, no pongas toda la carpeta en el directorio css. Cada tipo de archivo debe ir en su directorio, por lo que los archivos .scss debajo del directorio sass, los archivos de fuentes (.ttf, .woff, etc.) bajo el directorio css / fonts.

Eso es importante en Sass por la forma en que funciona @import . En la referencia Sass dice

Sass busca otros archivos de Sass en el directorio actual y el directorio de archivos de Sass en Rack, Rails o Merb. Se pueden especificar directorios de búsqueda adicionales utilizando la opción: load_paths, o la opción --load-path en la línea de comandos.

Pasé por alto eso y coloqué mis archivos .scss en otro directorio y es por eso que con un @import normal no se pudieron encontrar. Lo que nos lleva al siguiente punto.

3) Fue una tontería intentar importar un archivo .scss como una url (). Intenté hacerlo porque un @import normal no funcionaba. 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í, las rutas de @import son relativas a los archivos .scss y mientras font-awesome.scss y sus parciales estén en la misma carpeta, no es necesario tocarlos.

5) Eso fue correcto, necesita cambiar @FontAwesomePath para que coincida con su directorio de fuentes

6) Claro que necesitas un ejemplo de HTML para la prueba, así que aquí.

7) Eso fue innecesario, ya está en la fuente-impresionante.scss que estoy importando. SECO.

8) Igual que el anterior, innecesario también.

9 y 10) si niña, buen trabajo


Entonces, qué aprender de esto : verifique sus rutas dos veces teniendo en cuenta cómo @import en Sass solo se ve (de manera predeterminada) en su directorio actual de sass.

Pasos para instalar sass fuente impresionante impresionante.

  1. Descarga la carpeta de fuentes impresionantes y extráela.

  2. Abra la carpeta extraída >> font-awesome / scss, allí encontrará la fuente-awesome.scss y los archivos parciales de font-awesome. Mueve todos estos archivos a la carpeta scss de tu proyecto.

  3. Mueva la carpeta de fuentes que está dentro de la carpeta de fuentes impresionantes a su carpeta de proyectos >> Proyecto / fuentes

  4. abre el _varaible.scss y cambia la ruta como

$ fa-font-path: "../fonts"! default; {Su ruta relativa para las fuentes en este caso es ../../fonts}

  1. Enlace el font-awesome.css a su archivo de encabezado.

Ahora, estás listo

https://fortawesome.github.io/Font-Awesome/get-started/

obtener fuente impresionante por

yarn add font-awesome o

bower install font-awesome (no recomendado)

ahora vaya al directorio de fuentes impresionantes y copie la carpeta de fuentes y péguela una carpeta arriba de la carpeta css o la carpeta scss. P.ej:

./ ./bower_components/* ./node_modules/* ./styles/main.scss ./fonts ./index.html

¡Hecho!

Otro método si no desea copiar la carpeta de fuentes es agregar las siguientes líneas en su archivo main.scss :

$fa-font-path: "../bower_components/font-awesome/fonts/"; @import "../bower_components/font-awesome/scss/font-awesome";

Eso me funciona a mí:

  1. Ejecuta el comando:

    npm install font-awesome --save-dev

  2. Agregue estas líneas a index.scss:

    $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";