Sovrascrivere l'URL di @ font-face src?

Question

Stiamo usando FontAwesome con Bootstrap. Tuttavia, quando proviamo a usare FA con il nostro minificatore personalizzato, tenta di caricare i caratteri da un percorso relativo, che restituisce un 404, a causa del modo in cui la struttura dell'URL minificato è impostata.

Così abbiamo pensato che il modo migliore per risolvere questo problema era quello di aggiungere un ulteriore file CSS alla nostra lista di minifoto che avrebbe sovrascritto gli URL src @ font-face usati dal font FontAwesome. Fondamentalmente abbiamo appena copiato la definizione di @ font-face da FontAwesome e specificato le posizioni URL assolute.

Tuttavia, ora ciò che accade è che i nostri URL corretti caricano i font E vengono tentati gli URL originariamente specificati dal FontAwesome CSS (con gli stessi errori 404 di prima).

Stiamo facendo qualcosa di sbagliato, o non c'è davvero alcun modo per sovrascrivere gli URL di src @ font-face in modo che le definizioni "a monte" siano totalmente ignorate?

Answer 1

AGGIORNAMENTO: La "soluzione" di seguito non funzionava in realtà ... in effetti avevamo un errore di battitura, ma nei test successivi, questa non era ancora la causa principale e stiamo ancora affrontando il problema.

La soluzione deve essere MOLTO ATTENZIONE quando si sostituisce @ font-face, assicurandosi di fornire tutti gli stessi formati utilizzati nell'originale @ font-face. Altrimenti sembra che il browser la veda come una definizione diversa e proverà a scaricare i file a cui fa riferimento in entrambi, invece di sovrascriverli.

Quindi, ecco la definizione nel CSS di FontAwesome, a cui viene fatto riferimento per primo.

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

E quando abbiamo cercato di ignorare, abbiamo accidentalmente caduto il "format ('SVG')" definizione:

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1'); 
    src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'), 
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Una volta che abbiamo aggiunto la definizione format('truetype'), abbiamo sperimentato più i colpi supplementari che aveva portato a 404s.

Answer 2

Override semplice il font-family della classe base CSS:

.fa { 
    font-family: 'FontAwesome2' !important; 
} 

Poi, pasta/includere e modificare la definizione del carattere:

@font-face { 
    font-family: 'FontAwesome2'; 
    src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0'); 
    ... 
    font-style: normal; 
}