Buongiorno,
sto provando ad utilizzare Bootstrap Italia.
Ho delle difficoltà a caricare le icone:
Ecco un esempio da Bootstrap Italia:
<svg class="icon"><use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-tool"></use></svg>
Come ho scritto nel mio codice con la cartella svg allo stesso livello dell’index.html
<svg class="icon icon-light"><use xlink:href="svg/sprite.svg#it-arrow-up"></use></svg>
Dovrebbe essere una cosa semplice, qualcuno mi può aiutare?
Grazie
Carlo
Ciao @Carlo_Varchetta perdonami, ho visto solo ora il tuo messaggio.
Se non erro ti avevo già scritto sul Slack e confido che nel frattempo tu abbia risolto, ma ti rispondo comunque visto che può essere d’aiuto per altri.
È in effetti una cosa in teoria semplice, in quanto il percorso presente nell’attributo xlink:href
è gestito come il path di un asset qualsiasi in pagina, come il src
di un’immagine, o l’href
di un link. Per questo, dovrebbe essere sufficiente prestare attenzione ad avere il percorso corretto, includendo lo /
iniziale o, per fare una verifica, l’URL assoluto a cui accedi la sprite SVG, quindi qualcosa di tipo http://.../.../sprite.svg
.
Un’altra causa di tale problema può essere l’utilizzo di un ambiente locale: se stai caricando i file statici dal filesystem e non attraverso http
(quindi con il protocollo file://
nell’indirizzo del browser) non ti funzionerà, come descritto alla fine di questo articolo. Avrai un errore in console a suggerirtelo.
In questo caso, e più in generale per ogni tipo di sviluppo in locale, ti consiglio l’utilizzo di un server locale che permetta il caricamento dei file con http:
. Se hai nodejs installato, uno di questi è installabile con npm i http-server -g
e poi dalla cartella del tuo progetto lancia http-server .