font-face - error - font awesome spinner animation

"NetworkError: 404 No encontrado fontawesome-webfont.woff? V=4.0.3

Question

Recibo este mensaje de error cada vez que cargo la página de mi aplicación. Estoy usando Apache. Siguiente es mi código css.

url (''../ fonts / fontawesome-webfont.woff? v = 4.0.3'') formato (''woff'')

Firefox lanza

"NetworkError: 404 Not Found url ... / fonts / fontawesome-webfont.woff? V = 4.0.3

Mientras chrome dice

GET url ... / fonts / fontawesome-webfont.woff? V = 4.0.3 404 (No encontrado)

¿Alguien puede decirme cómo solucionar este problema? Gracias por adelantado.

Answer 1

Agregue "src:" antes de url, ejemplo: -

@font-face {
  font-family: ''FontAwesome'';
  src: url(''../fonts/fontawesome-webfont.eot?v=4.7.0'');    
  src: url(''../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0'') format(''embedded-opentype'');    
  src: url(''../fonts/fontawesome-webfont.woff2?v=4.7.0'') format(''woff2'');    
  src: url(''../fonts/fontawesome-webfont.woff?v=4.7.0'') format(''woff'');    
  src: url(''../fonts/fontawesome-webfont.ttf?v=4.7.0'') format(''truetype'');    
  src: url(''../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular'') format(''svg'');    
  font-weight: normal;    
  font-style: normal;
}

Answer 2

Esto funcionó para mí: agregue las siguientes líneas a su web.config

<system.webServer>
 <staticContent>
   <remove fileExtension=".woff"/>
   <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
 </staticContent>
</system.webServer>

Debe agregar estas líneas porque, de forma predeterminada, Apache no está configurado con .woff como un tipo MIME predeterminado. El tipo MIME predeterminado de Apache también se aplica a IIS. Como explica Seb Duggan aquí: IIS predeterminado MIME , de forma predeterminada, los archivos .woff no serán atendidos por el servidor.

Answer 3

He actualizado mime-types en mi servidor web IIS y eso resuelve mi problema.

Extention > .ttf    MimeType > application/x-font-ttf
Extention > .woff   MimeType > application/x-font-woff
Extention > .woff2  MimeType > application/x-font-woff2

No necesito cambiar nada en web.config.

Answer 4

Lo resuelvo también mediante la adición del tipo de archivo bajo los controladores en su web.config para cualquier aplicación .net, angular, etc. Puede configurar un web.config en IIS

     <handlers>
     <add name="fonts" path="*.woff" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     <add name="fonts2" path="*.woff2" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     </handlers>

Answer 5

Si no tiene acceso a la configuración de su servidor web, también puede RENOMBRAR el archivo para que termine en svg (pero retenga el formato). Funciona bien para mí en Chrome y Firefox.