# Integrare FontAwesome 5 **URL:** \ **Category:** Non categorizzato\ **Tags:** idf\ **Created:** [21 Settembre 2021, 9:02am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103 "2021-09-21T09:02:16Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![mauro.v](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/mauro.v/32/50_2.png) [@mauro.v](https://community.instantdeveloper.com/u/mauro.v)\ **Post date:** [21 Settembre 2021, 9:02am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/1 "2021-09-21T09:02:16Z")
Buongiorno a tutti, Versione Instant Developer Foundation : **21.0.r15** Tema utilizzato: **bootstrapzen** Volevo condividere quelli che sono stati i passaggi necessari per integrare FontAwesome5 (fa 6 è ancora in beta) nei progetti sviluppati con Instant Developer Foundation. FontAwesome4 andrebbe già bene, mancavano però molte varianti di alcune icone (es. **fa-user** ) motivo per cui ho deciso di fare un piccolo sforzo. Prima di tutto occorre ovviamente effettuare il download di fa5, di seguito il link [Font Awesome 5](https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) Nel contenuto scaricato le parti necessarie sono : 1. Il file **all.min.css** presente dentro la cartella **css** 2. La cartella **webfonts** a cui **all.min.js** fa riferimento. Il file **all.min.css** è stato di seguito rinominato in **fontawesome.min.css** in modo da lasciare invariato il file **Desktop.htm**. Questi file devono ovviamente essere integrati dentro la cartella custom del progetto, ricordandosi di specificarli nel file **FileList.txt** come di seguito : ```auto res\ res\css\ res\css\font-awesome.min.css res\webfonts\ res\webfonts\fa-brands-400.eot res\webfonts\fa-brands-400.svg res\webfonts\fa-brands-400.ttf res\webfonts\fa-brands-400.woff res\webfonts\fa-brands-400.woff2 res\webfonts\fa-regular-400.eot res\webfonts\fa-regular-400.svg res\webfonts\fa-regular-400.ttf res\webfonts\fa-regular-400.woff res\webfonts\fa-regular-400.woff2 res\webfonts\fa-solid-900.eot res\webfonts\fa-solid-900.svg res\webfonts\fa-solid-900.ttf res\webfonts\fa-solid-900.woff res\webfonts\fa-solid-900.woff2 ``` Questo, però, non è tutto. Ci sono alcune icone integrate nella toolbar o nel calendario che non erano visibili. Questo perchè hanno cambiato nome nel cambio di versione, motivo per cui bisogna anche modificare il file **ClientParams.js** (esempio di seguito): ```auto this.FA_ICON_UNDO = "fa-times"; // this.FA_ICON_REFRESH = "fa-refresh"; // old icon this.FA_ICON_REFRESH = "fa-sync"; ``` Anche **ClientParams.js** va integrato dentro la cartella custom e aggiunto a **FileList.txt** : ```auto RD3\ RD3\ClientParams.js ``` Curioso di sapere se qualcuno ha provato questa integrazione e se, eventualmente, esiste un’altra metodologia. A presto ---
**Author:** ![stefano.masiero](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/stefano.masiero/32/184_2.png) [@stefano.masiero](https://community.instantdeveloper.com/u/stefano.masiero)\ **Post date:** [21 Settembre 2021, 2:16pm UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/2 "2021-09-21T14:16:20Z")
Grazie Mauro sono molto interessato. Io uso tema bootstrap molto personalizzato. Non sono ancora alla 21 ma contavo di passarci a breve. Farò sicuramente una prova di integrazione con FA 5. Ti dico due cose che forse farei in modo diverso: - la cartella dei font la chiamerei “fonts” e non “webfonts”, ne ho una già così ma mi sembrava di averla fatta perchè avevo letto che è un blueprint (da verificare) - io ho fatto delle modifiche ad alcune icone FA e per farlo ho usato un metodo che viene richiamato dal framework RD3 al momento opportuno e nel quale puoi fare eventuali personalizzazioni (spiego sotto). **Personalizzazione icone FA** Se guardi nel file Desktop.js trovi la seguente dichiarazione di funzione: ```auto // ******************************************************** // Funzione da sovrascrivere in custom3.js per // effettuare inizializzazione personalizzata // ******************************************************** function RD3_CustomInit() { } ``` Seguendo quindi le istruzioni riportate nel commento è sufficiente per te provare a scrivere nel custom3.js: ```auto function RD3_CustomInit() { this.FA_ICON_UNDO = "fa-times"; // this.FA_ICON_REFRESH = "fa-refresh"; // old icon this.FA_ICON_REFRESH = "fa-sync"; } ``` In questo modo puoi saltare la parte di ClientParams.js, evito sempre di ridefinire file js di framework per ragioni di manutenibilità. Fammi sapere se funziona. Stefano ---
**Author:** ![mauro.v](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/mauro.v/32/50_2.png) [@mauro.v](https://community.instantdeveloper.com/u/mauro.v)\ **Post date:** [21 Settembre 2021, 3:46pm UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/3 "2021-09-21T15:46:55Z")
Ciao Stefano, Si hai ragione, proverò a definire quelle righe di codice dentro la funzione **RD3\_CustomInit**. Per quanto riguarda il nome della cartella relativa ai fonts, ho preferito lasciare il nome che aveva originariamente in quanto viene richiamata da **all.min.css** , esempio : ```auto src:url(../webfonts/fa-brands-400.eot) ``` Si potrebbe cambiare la voce webfonts in fonts, preferisco però lasciare invariato il file **all.min.css**. Ti aggiorno se funziona il tutto con il suggerimento che mi hai dato, grazie! ---
**Author:** ![stefano.masiero](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/stefano.masiero/32/184_2.png) [@stefano.masiero](https://community.instantdeveloper.com/u/stefano.masiero)\ **Post date:** [21 Settembre 2021, 4:01pm UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/4 "2021-09-21T16:01:23Z")
Ok Mauro, Per la cartella webfonts ritengo a questo punto sia corretto come hai fatto tu. ---
**Author:** ![fspinelli](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/fspinelli/32/35_2.png) [@fspinelli](https://community.instantdeveloper.com/u/fspinelli)\ **Post date:** [22 Settembre 2021, 7:15am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/5 "2021-09-22T07:15:55Z")
Ciao, noi usiamo il tema Zen e abbiamo integrato i font awesom(attualmente il 5) così: Tutto il necessario è nella cartella fa nella custom, integrata nel Filelist.txt con l’istruzione fa\*=fa questa sintassi nel Filelist.txt permette di includere tutto il contenuto di una cartella senza dover specificare file per file. nel file desktop.html va inserito ![immagine](https://community.instantdeveloper.com/uploads/default/original/1X/8dff6606485cdfac9fc5ffea7b8ab5cdafcf3474.png) la parte ?VRS=\_ICD\_VERSION\_NAME.\_ICD\_BUILD\_NUMBER" serve per vuotare la cache, se quando cambiate qualcosa nel programma, andate a variare la versione applicazione (tasto destro sull’applicazione, wizard, configura parametri e generale), con questa istruzione avviene in pratica il vuota cache in automatico. Abbiamo creato una tabella dove abbiamo inserito i font awesom ![immagine](https://community.instantdeveloper.com/uploads/default/original/1X/295cec92f09fdb4c89e3e1c9c66093b0d1a48657.png) Abbiamo fatto la funzione GetIconaFA che riceve in ingresso la descrizione della tabella, e opzionali, il colore e il title per emettere un tooltip. ![immagine](https://community.instantdeveloper.com/uploads/default/original/1X/dc7d97cff49db4680cfa70d203932161ddc34ef4.png) ![immagine](https://community.instantdeveloper.com/uploads/default/original/1X/1637c6532c5f01ac7dd83f97ad9322ebf894cefa.png) la funzione ![immagine](https://community.instantdeveloper.com/uploads/default/original/1X/89bc86f5790a62af258a7122a2f2ef6c403544b8.png) ![immagine](https://community.instantdeveloper.com/uploads/default/original/1X/bbe2241cd690eefff7b8a82d5ea38920d8618eae.png) Spero sia chiara la funzione, ho dovuto fare degli screen perché non ho idea se il contenuto del visual code editor può essere copiato come stringa. Buona giornata a tutti. ---
**Author:** ![paolo.giannelli](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/paolo.giannelli/32/12_2.png) [@paolo.giannelli](https://community.instantdeveloper.com/u/paolo.giannelli)\ **Post date:** [22 Settembre 2021, 9:51am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/6 "2021-09-22T09:51:18Z")
Innanzi tutto benvenuto a @mauro.v! Grazie del tuo contributo e un grazie anche a tutti gli altri che stanno animando questa discussione. ---
**Author:** ![r.bianco](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/r.bianco/32/41_2.png) [@r.bianco](https://community.instantdeveloper.com/u/r.bianco)\ **Post date:** [22 Settembre 2021, 9:51am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/7 "2021-09-22T09:51:35Z")
Anche noi abbiamo integrato i fa (4.x) nel tema Zen, in modo meno sofisticato però. La differenza principale è che al posto della tabella abbiamo una lista valori con il valore esadecimale del font, convertito in decimale. Nel load della videata specifichiamo CampoPannello.caption=CHR([costante]). Inoltre abbiamo creato un Visual Style in cui abbiamo selezionato il fa come font, e lo abbiamo applicato dove serve. ---
**Author:** ![stefano.masiero](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/stefano.masiero/32/184_2.png) [@stefano.masiero](https://community.instantdeveloper.com/u/stefano.masiero)\ **Post date:** [15 Novembre 2021, 8:17am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/8 "2021-11-15T08:17:54Z")
Ciao Mauro abbiamo provato la migrazione verso FontAwesome 5 su tema Bootstrap versione 20 seguendo le tue indicazioni e il risultato è awesome! Sono in debito. Grazie Stefano ---
**Author:** ![mauro.v](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/mauro.v/32/50_2.png) [@mauro.v](https://community.instantdeveloper.com/u/mauro.v)\ **Post date:** [18 Novembre 2021, 8:28am UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/9 "2021-11-18T08:28:03Z")
Di nulla Stefano, io direi invece di seguire il consiglio che mi hai fornito riguardo le istruzioni da inserire nella funzione RD3\_CustomInit in custom3.js, l’ho provato quando ho ricevuto la notifica (avevo dimenticato di implementarlo) e funziona 🙂 A presto e buon lavoro! ---
**Author:** ![theguru](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/theguru/32/247_2.png) [@theguru](https://community.instantdeveloper.com/u/theguru)\ **Post date:** [2 Febbraio 2022, 4:32pm UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/10 "2022-02-02T16:32:47Z")
Buongiorno a tutti! Anche io sono tra gli “integratori” di fontawesome, sia su bootstrap che sui temi rd3 (siattle, ho un sistema basato su .css e .js). **Vorrei chiedere se qualcuno fosse riuscito con successo ad utilizzarli nei book** (stampati come pdf, non a video). Io ho fatto numerose prove, ma senza successo. Il problema (abbastanza comune nei book pdf) è che gli algoritmi con cui vengono generati sono “blindati”, e non è possibile smanettare su html e js. Nel caso non ci fosse soluzione, lo ritenete un utile upgrade da chiedere a progamma? ---
**Author:** ![paolo.giannelli](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/paolo.giannelli/32/12_2.png) [@paolo.giannelli](https://community.instantdeveloper.com/u/paolo.giannelli)\ **Post date:** [31 Agosto 2022, 12:36pm UTC](https://community.instantdeveloper.com/t/integrare-fontawesome-5/103/11 "2022-08-31T12:36:27Z")
@fspinelli riguardo alla tua frase: > Spero sia chiara la funzione, ho dovuto fare degli screen perché non ho idea se il contenuto del visual code editor può essere copiato come stringa. Ti dico che un modo c’è: selezioni il codice e poi dal menu **Modifica** selezioni la voce **Copia come testo**. Ho notato la cosa solo oggi rileggendo questo post.