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
Nel contenuto scaricato le parti necessarie sono :
Il file all.min.css presente dentro la cartella css
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 :
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):
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:
// ********************************************************
// 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:
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à.
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 :
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!
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.
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
Abbiamo fatto la funzione GetIconaFA che riceve in ingresso la descrizione della tabella, e opzionali, il colore e il title per emettere un tooltip.
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.
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
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
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?
