OpenUI5'e yeni simgeler ekle?

Question

OpenUI5'e yeni simgeler eklememiz gerekiyor. Simgeler önceden vektör tabanlı yazı tipi olarak tanımlanmıştır.

Simgeleri, https://icomoon.io/ gibi bir hizmet aracılığıyla SAP standart yazı tipine eklemenin mümkün olduğunu biliyorum. Ancak, onları ayrı bir dosyada saklamak zorunda kalmak istiyorum (böylece yeni bir OpenUI5 sürümü geldiğinde görevi yeniden yapmamız gerekmez).

Simgeler için kullanılacak ek yazı tipi tanımlamak mümkün mü?

Answer 1

Daha önce de belirttiğiniz gibi, gelecekte uyumluluk nedeniyle UI5 ​​fontunu genişletmek iyi bir fikir değildir. Kendi yazı tipinize sahipseniz, bunu UI5 ile kolayca kaydedebilir ve benzer bir URL-şemasını kullanarak referans alabilirsiniz. sap-icon://funny-icon yerine sap-icon://dparnas-icon/funny-icon yazabilirsiniz.

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

Ayrıca, CSS'nizde font-family tanımlamak gerekir: Burada

örnek uygulamasıdır. Bu kadar!

Answer 2

Ben, bu özel simgeler

@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