ttf solid otf fontawesome font error content awesome css fonts font-awesome-5

css - solid - fontawesome 5 font-family no funciona



font awesome ttf (15)

fontawesome 5 en un proyecto con bootstrap 4. Cuando recuerdo una fuente a través de css , no funciona. con fontawesome 4 el código era el siguiente:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after { float: right; content: ''/f107''; font-family: ''FontAwesome''; }

Traté de cambiar el nombre de la fuente pero no funciona

font-family: ''Font Awesome 5 Free''

Desde FontAwesome 5, debe habilitar una nueva opción "searchPseudoElements" para usar los iconos de FontAwesome de esta manera:

<script> window.FontAwesomeConfig = { searchPseudoElements: true } </script>

Consulte también esta pregunta: Font awesome 5 en pseudoelementos y la nueva API Font Awesome: https://fontawesome.com/how-to-use/font-awesome-api

Además, cambie la familia de fuentes en su código CSS a

font-family: "Font Awesome 5 Regular";

El problema está en el font-weight la font-weight .
Para Font Awesome 5 tienes que usar {font-weight:900}

Encontré una solución.

  • Integrar fontawesome-all.css

  • Al final del archivo, busque la segunda @ font-face y reemplácela

    font-family: ''Font Awesome 5 Free'';

Con

font-family: ''Font Awesome 5 FreeR'';

Y reemplazar:

.far { font-family: ''Font Awesome 5 Free''; font-weight: 400; }

Con

.far { font-family: ''Font Awesome 5 FreeR''; font-weight: 400; }

Extrañamente debes poner el '' font-weight: 900 '' en algunos íconos para que los muestre.

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after { content: ''/f107''; font-family: ''Font Awesome/ 5 Free''; font-weight: 900; /* Fix version 5.0.9 */ }

Extrañamente tienes que incluir la familia de fuentes y el peso de fuente para que funcione. Esto es lo que funcionó para mí:

.second-section-header::after { content: "/f259"; font-family: ''Font Awesome/ 5 Free''; font-weight: 900; }

A partir de ahí, puede comenzar a agregar los estilos que desee.

Digamos:

.second-section-header::after { content: "/f259"; font-family: ''Font Awesome/ 5 Free''; font-weight: 900; font-size: 100px; color: white; z-index: 1; position: absolute; }

Espero que esto ayude.

Había probado todas las soluciones anteriores para Font Awesome 5 pero no me funcionaba. :(

¡Finalmente, tengo una solución!

Simplemente use font-family: "Font Awesome 5 Pro"; en su CSS en lugar de font-family: "Font Awesome 5 Free OR Solids OR Brands";

No quería usar la versión ''all'', así que busqué en el fontawesome-all.min.css '' fontawesome-all.min.css '' (incluido previamente en el encabezado) para la etiqueta ''family'' y encontré al final una declaración @font-face{font-family:**Font Awesome/ 5 Free**;font-style:normal;

Entonces, en la hoja de estilo para un elemento donde quería usar el content: "/f0c8"; código, he agregado (o cambiado a) font-family: Font Awesome/ 5 Free; Y funcionó.

.frb input[type="checkbox"] ~ label:before { font-family: Font Awesome/ 5 Free; content: "/f0c8"; font-weight: 900; position: absolute; }

Requerir 900 pesos no es una rareza, sino una restricción intencional agregada por FontAwesome (ya que comparten el mismo Unicode pero solo un peso de fuente diferente) para que no esté pirateando su camino para usar los iconos ''sólido'' y ''ligero'', la mayoría de que solo están disponibles en la versión paga ''Pro''.

Si está utilizando SVG con JavaScript , debe habilitarlo porque está deshabilitado de forma predeterminada. Utilizar

<script data-search-pseudo-elements ... >

dentro de su etiqueta de script.

Tu Unicode está mal f107

a::after { content: "/f007"; font-family: ''Font Awesome/ 5 Free''; }

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet"> <a>User</a> <i class="fas fa-shopping-basket"></i>

O en otro caso, font-weight: 900; te salvará Algunos iconos en font awesome 5 no funcionan sin font-weight: 900; .

a::after { content: "/f007"; font-family: ''Font Awesome/ 5 Free''; font-weight: 900; }

Tuve que establecer searchPseudoElements en true para que funcione en Angular5.

import fontawesome from ''@fortawesome/fontawesome''; ... fontawesome.config.searchPseudoElements = true; ... content: "/f12a"; font-family: ''Font Awesome 5 Solid'';

Usando el archivo fontawesome-all.css: el cambio de la familia de fuentes "Marcas" de "Font Awesome 5 Free" a "Font Awesome 5 Brands" solucionó los problemas que tenía.

No puedo tomar todo el crédito: solucioné mi propio problema local justo antes de mirar la versión de CDN: https://use.fontawesome.com/releases/v5.0.6/css/all.css

También resolvieron el problema en el CDN.

@font-face { font-family: ''Font Awesome 5 Brands''; font-style: normal; font-weight: normal; src: url("../webfonts/fa-brands-400.eot"); src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); } .fab { font-family: ''Font Awesome 5 Brands''; } @font-face { font-family: ''Font Awesome 5 Brands''; font-style: normal; font-weight: 400; src: url("../webfonts/fa-regular-400.eot"); src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

la solución es llamarlo como fuente normal:

@font-face { font-family: "Font Awesome 5 Free-Regular-400"; src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}

npm i --save @ fortawesome / fontawesome-free

Mis Sccs:

@import "~@fortawesome/fontawesome-free/scss/fontawesome"; @import "~@fortawesome/fontawesome-free/scss/brands"; @import "~@fortawesome/fontawesome-free/scss/regular"; @import "~@fortawesome/fontawesome-free/scss/solid"; @import "~@fortawesome/fontawesome-free/scss/v4-shims";

¡Funcionó bien para mí!