Hinzufügen neuer Symbole zu OpenUI5?

Question

Wir müssen neue Icons zu OpenUI5 hinzufügen. Die Symbole sind bereits als vektorbasierte Schriftart definiert.

Ich weiß, dass es möglich ist, die Symbole der SAP-Standardschrift über einen Dienst wie https://icomoon.io/ hinzuzufügen. Ich möchte jedoch in der Lage sein, sie außerhalb in einer separaten Datei zu verwalten (so dass wir die Aufgabe nicht wiederholen müssen, wenn eine neue OpenUI5-Version kommt).

Ist es möglich, eine zusätzliche Schriftart für Symbole zu definieren?

Answer 1

Wie Sie bereits erwähnt haben, ist es keine gute Idee, die Schriftart UI5 aus Gründen der zukünftigen Kompatibilität zu erweitern. Wenn Sie bereits eine eigene Schriftart haben, können Sie sie einfach mit UI5 registrieren und mit einem ähnlichen URL-Schema referenzieren. Anstelle von sap-icon://funny-icon könnte man sagen sap-icon://dparnas-icon/funny-icon.

Hier ist eine Beispielimplementierung:

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] 
    ); 
    } 
}()); 

Des Weiteren finden Sie die font-family in Ihrem CSS zu definieren. Das ist es! Es ist einfach, aber schwer zu finden;)

Answer 2

Ich versuchte fontawesome Symbole in meine Anwendung Hoffnung Zugabe dies hilft Ihnen bei der Erzeugung und Verwendung von benutzerdefinierten Symbolen

@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