fontawesome su temi ionic [RISOLTO]

[texw]

ciao a tutti, qualcuno ha mai abilitato il rendering di icone fontawesome dentro temi ionic? se si, può dare un suggerimento?

ho una classe che nella getname() restituisce icona+ testo ma tale icona fontawesome non viene renderizzata negli alberi mobile

[d.pierangeli]

Non hai delle icone simili nel set delle IonIcons da usare?

Per fontawesome non l'ho mai fatto, ma in teoria bisognerebbe fare due cose:
- modificare le pagine desktop.html e desktop_sm.html includendo i file di fontawesome.
- modificare le funzioni javascript che generano il testo delle icone per tenere conto di font-awesome

A seconda di dove le vuoi usare vanno modificate alcune funzioni, per gli alberi:

GlobalObject.prototype.ExtractIconString = function(value)
{
....
}

GlobalObject.prototype.HandleIconString = function (value, empty) { ... }

TreeNode.prototype.SetImage= function(value)
{ ... }

Dovrebbe bastare vedere se il testo dell'icona contiene "fa-" allora estrarre il nome e comporre la stringa con le regole di font-awesome.

[texw]

grazie, ok proverò


in alternativa sto usando il font noto e le "emoticons"

[texw]

Non hai delle icone simili nel set delle IonIcons da usare?

Per fontawesome non l'ho mai fatto, ma in teoria bisognerebbe fare due cose:
- modificare le pagine desktop.html e desktop_sm.html includendo i file di fontawesome.
- modificare le funzioni javascript che generano il testo delle icone per tenere conto di font-awesome

A seconda di dove le vuoi usare vanno modificate alcune funzioni, per gli alberi:

GlobalObject.prototype.ExtractIconString = function(value)
{
....
}

GlobalObject.prototype.HandleIconString = function (value, empty) { ... }

TreeNode.prototype.SetImage= function(value)
{ ... }

Dovrebbe bastare vedere se il testo dell'icona contiene "fa-" allora estrarre il nome e comporre la stringa con le regole di font-awesome.

sono riuscito ad implementare questa modifica attraverso i seguenti passaggi:

1
copiare nella app\custom i file font e css di fontawesome (res\fonts e res\css)
aggiungere la riga res\* al filelist.txt così da avere in release questi files

2
copiare nella app\custom i file desktop.htm desktop_sm.htm e modificarli includendo la seguente riga:

Code: Select all

<link href="res/css/font-awesome.min.css" rel="stylesheet">

3
modificare le seguenti funzioni del file \rd3\GlobalObject.js (copiando la logica dalla funzione del Rd3 di bootstrap, funzione "HandleIconString"): ExtractIconString, HandleIconString, HasIconString

Code: Select all

/**
* Data una stringa che contiene "{{icon-XXX}}" restituisce un oggetto con due proprieta'
*   val - valore della stringa senza icona
*   icon - icona estratta
*   color - colore (primary, secondary..)
* @param {string} value
*/
GlobalObject.prototype.ExtractIconString = function(value)
{

  var v = value;
  var icon = "";
  var color = "primary";
  var side = "left";

  /*Devid 18/03/2025 */
  while (v.indexOf && v.indexOf("{{icon-fa-") != -1 && v.indexOf("}}") != -1) {
    var begin = v.indexOf("{{");
    var end = v.indexOf("}}", begin + 2);
    //
    // Problema... usciamo dal ciclo (probabilmente siamo in un caso '}} {{icon-' )
    if (!end || end < 0)
      break;
    //
    if (icon.length === 0) {
      // estraggo la stringa dell'icon
      var i = v.substring(begin + 7, end);
      //
      icon = "<i class='fa " + v.substring(begin + 7, end) + "'></i>";
    }
    //
    if (end + 2 == v.length)
      side = "right";
    //
    v = v.substring(0, begin) + v.substring(end + 2);
  }
 
  while (v.indexOf && v.indexOf("{{icon-") != -1 && v.indexOf("}}") != -1) {
    var begin = v.indexOf("{{");
    var end = v.indexOf("}}", begin + 2);
    //
    // Problema... usciamo dal ciclo (probabilmente siamo in un caso '}} {{icon-' )
    if (!end || end < 0)
      break;
    //
    if (icon.length === 0) {
      // estraggo la stringa dell'icon
      var i = v.substring(begin + 7, end);
      if (i.indexOf("|")!=-1) {
        // Estraggo il colore
        color = i.substring(i.indexOf("|") + 1);
        i = i.substring(0, i.indexOf("|"));
      }
      //
      icon = "ion-" + this.GetGlobalString(i) + i;
    }
    //
    if (end + 2 == v.length)
      side = "right";
    //
    v = v.substring(0, begin) + v.substring(end + 2);
  }
  //
  return {val:v, icon:icon, color: color, side: side};
};

/**
* Data una stringa che contiene "{{icon-XXX}}" ne sostituisce le occorrenze con l'HTML delle icone reali
* @param {string} value
* @param {bool} empty - if true the icon-string are replaced with "" 
*/
GlobalObject.prototype.HandleIconString = function (value, empty) {

  var v = value;

  /*Devid 18/03/2025 */
  while (v.indexOf && v.indexOf("{{icon-fa-") != -1 && v.indexOf("}}") != -1) {
    var begin = v.indexOf("{{");
    var end = v.indexOf("}}", begin + 2);
    //
    // Problema... usciamo dal ciclo (probabilmente siamo in un caso '}} {{icon-' )
    if (!end || end < 0)
      break;
    //
    if (empty)
      v = v.substring(0, begin) + v.substring(end + 2);
    else {
      var icon = "<i class='fa " + v.substring(begin + 7, end) + "'></i>";
      v = v.substring(0, begin) + icon + v.substring(end + 2);
    }
  }

  while (v.indexOf && v.indexOf("{{icon-") != -1 && v.indexOf("}}") != -1) {
    var begin = v.indexOf("{{");
    var end = v.indexOf("}}", begin + 2);
    //
    // Problema... usciamo dal ciclo (probabilmente siamo in un caso '}} {{icon-' )
    if (!end || end < 0)
      break;
    //
    if (empty)
      v = v.substring(0, begin) + v.substring(end + 2);
    else {
      // estraggo la stringa dell'icon
      var color = "primary";
      var i = v.substring(begin + 7, end);
      if (i.indexOf("|") != -1) {
        // Estraggo il colore
        color = i.substring(i.indexOf("|") + 1);
        i = i.substring(0, i.indexOf("|"));
      }
      //
      var icon = "<ion-icon class='icon icon-" + RD3_DesktopManager.Platform + " ion-" + this.GetGlobalString(i) + i + "' style='padding-right: .4em;' " + color + "></ion-icon>"
      v = v.substring(0, begin) + icon + v.substring(end + 2);
    }
  }
  //
  return v;
};


4
modificare la seguente funzione del file \rd3\Objects\TreeNode.js: TreeNode.prototype.SetImage= function(value, includendo la logica per gestire i file fa-:

Code: Select all

TreeNode.prototype.SetImage= function(value)
{
  if (value != undefined)
    this.Image = value;

  /*Devid 18/03/2025 */
  if (this.Realized)
  {
    if (this.Image == "")
      this.NodeImg.style.display = "none";
    else if (this.Image.indexOf && this.Image.indexOf("fa-") != -1) {
      this.NodeImg.style.display = "";   
      this.NodeImg.className = "";
      this.NodeImg.innerHTML = this.Image;
    }
    else{
      this.NodeImg.style.display = "";   
      this.NodeImg.className = "ion-" + RD3_DesktopManager.Platform + " " + this.Image;
    }
  }
}