Come utilizzare l'icona di caratteri personalizzati/esterni in App con pacchetto Chrome

Ho l'app Chrome Pack scritta in AngularDart e sto cercando di ottenere alcune icone esterne per rendere l'app più gradevole, ma non ho trovato alcun esempio sulla rete. Ho provato molte cose insieme alla soluzione alternativa, ma non riuscivo a farlo funzionare. Sto aggiungendo il @ font-face al mio css, come di seguito:Come utilizzare l'icona di caratteri personalizzati/esterni in App con pacchetto Chrome

@font-face { 
    font-family: 'Icons'; 
    src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'), 
     url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'), 
     url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: 'Icons'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 

    /* Better Font Rendering =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-uniF085:before { 
    content: "\f085"; 
}

sto cercando di evitare di CSP (politica di sicurezza dei contenuti) problemi convertendo i miei file icona: .ttf, .woff, Svg , .eot a base64 e incorporandoli nel mio controller CSS, ma quando eseguo l'applicazione tutto ciò che vedo nel cromo è la casella quadrata predefinita anziché l'icona I am reference(); nessun errore sulla console o sul browser chromium. Mi chiedo se qualcuno abbia personalizzato icone o caratteri esterni che funzionano con le app di Chrome Packaged. Per favore fatemi sapere se c'è una soluzione alternativa in ogni caso.

fonte

2014-09-04 UCJava

Sto usando le icone PNG nell'app come un aggiramento per ora, ma sarebbe bello poter usare i file .ttf, .woff, .svg, .eot in un'app imballata in chrome. Si prega di inviare una soluzione se si è in grado di utilizzare qualsiasi forma di quelli in un'app confezione cromato angulart-dart. – UCJava

Forse rimuovi la citazione singola da "Icone" nella parte che stai effettivamente impostando? So che in un normale file css non si usano le virgolette dopo aver già specificato la stringa nel bit @ font-face. – shanling

Questo potrebbe essere rilevante https://developer.chrome.com/extensions/manifest/web_accessible_resources –

bene dopo alcuni tentativi, vedo il il problema qui non è l'incorporamento dei file nel componente, ma in realtà il lavoro con i caratteri all'interno di shadowDOM non sembra accadere, una volta disabilitato shadowDOM per il mio componente, è possibile utilizzare gli stili globali e le icone funzionano come codificato in base64, ma disabilitando shadowDOM fuori tutto si ammassa l'intero disegno della pagina del componente che avrei bisogno di refactoring. Penso ancora che ci dovrebbe essere un modo per usare font-face in shadowDOM.

fonte

2014-12-10 00:38:20 UCJava

Prova l'IcoMoon https://icomoon.io/app/ Una volta importato le icone, genererà file CSS con i font incorporati (disattivata per impostazione predefinita, il cambiamento nelle preferenze) funzionato bene per me

fonte

2014-10-30 10:51:04 ochakov

bene dopo alcuni tentativi, vedo che il problema qui non è incorporare i file nel componente, ma in realtà ottenere il lavoro di font-face all'interno di shadowDOM che non sembra accadere, una volta disabilitato shadowDOM per il mio componente che può utilizzare gli stili globali e le icone funzionano bene come codificati in base64, ma disabilitando shadowDOM, naturalmente, si ammassa l'intero disegno della pagina del componente che avrei bisogno di refactoring. Penso ancora che ci dovrebbe essere un modo per usare font-face in shadowDOM. – UCJava

Come utilizzare l'icona di caratteri personalizzati/esterni in App con pacchetto Chrome

risposta

Problemi correlati