Aggiungi nuove icone a OpenUI5?

Question

Abbiamo bisogno di aggiungere nuove icone a OpenUI5. Le icone sono già definite come un carattere vettoriale.

So che è possibile aggiungere le icone al carattere standard SAP tramite un servizio come https://icomoon.io/. Tuttavia, voglio essere in grado di mantenerli all'esterno in un file separato (in modo da non dover ripetere l'attività quando arriva una nuova versione di OpenUI5).

È possibile definire un carattere aggiuntivo da utilizzare per le icone?

Answer 1

Come già accennato, non è una buona idea estendere il font UI5 per motivi di compatibilità futura. Se hai già un tuo font, puoi facilmente registrarlo con UI5 e fare riferimento ad esso usando uno schema url simile. Invece di sap-icon://funny-icon potresti dire sap-icon://dparnas-icon/funny-icon.

Ecco un esempio di implementazione:

jQuery.sap.require("sap.ui.core.IconPool"); 
jQuery.sap.require("sap.ui.thirdparty.URI"); 

(function() { 
    var aIconNames = [ "funny-icon", "another-icon" ], // the icon names 
    sCollectionName = "dparnas-icon", // the collection name used in the url-schema 
    sFontFamily = "DarnasIcons", // the icon font family like defined in your css 
    aIconContents = [ "E003", "E004" ]; // the unicode characters to find aIconNames under, same order 

    // add the icons the your icon pool 
    for (var i = 0; i < aIconNames.length && i < aIconContents.length; i++) { 
    sap.ui.core.IconPool.addIcon(
     aIconNames[i], 
     sCollectionName, 
     sFontFamily, 
     aIconContents[i] 
    ); 
    } 
}()); 

Inoltre si dovrà definire il font-family nel CSS. Questo è tutto! E 'facile ma difficile da trovare;)

Answer 2

Ho provato ad aggiungere icone fontawesome nella mia applicazione speranza che questo ti aiuta a generare e utilizzare icone personalizzate

@font-face { 
    font-family: 'fontAwesome'; 
    src:url('./css/font-awesome/fonts/fontawesome-webfont.eot?5qvb9g'); 
    src:url('./css/font-awesome/fonts/fontawesome-webfont.eot?5qvb9g#iefix') format('embedded-opentype'), 
    url('./css/font-awesome/fonts/fontawesome-webfont.ttf?5qvb9g') format('truetype'), 
    url('./css/font-awesome/font-awesome/fonts/fontawesome-webfont.woff?5qvb9g') format('woff'), 
    url('./css/font-awesome/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');  
    font-weight: normal; 
    font-style: normal; 
} 
[class^="icon-"], [class*=" icon-"] { 
    font-family: 'fontAwesome'; 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.icon-bell:before { 
    content: "\f0f3"; 
} 

//initialize the icon in Init() 
sap.ui.getCore().attachInit(function() { 
    //sap.ui.core.IconPool.addIcon(iconName, collectionName, iconInfo, content)//icon definition 
    sap.ui.core.IconPool.addIcon('register', 'customfont', 'fontAwesome', 'f0f3'); //adding new icon 
}) 

//Using the icon 
sap-icon://customfont/bell