Dodaj nowe ikony do OpenUI5?

Question

Potrzebujemy dodać nowe ikony do OpenUI5. Ikony są już zdefiniowane jako czcionki wektorowe.

Wiem, że istnieje możliwość dodania ikon do standardowej czcionki SAP za pośrednictwem usługi takiej jak https://icomoon.io/. Jednak chcę mieć możliwość utrzymania ich na zewnątrz w oddzielnym pliku (abyśmy nie musieli wykonywać ponownie zadania, gdy pojawi się nowa wersja OpenUI5).

Czy można zdefiniować dodatkową czcionkę do użycia w przypadku ikon?

Answer 1

Jak już wspomniano, nie jest dobrym pomysłem przedłużenie czcionki UI5 ze względu na kompatybilność w przyszłości. Jeśli masz już własną czcionkę, możesz łatwo zarejestrować ją w interfejsie użytkownika UI5 i odwołać się do niej przy użyciu podobnego schematu URL. Zamiast sap-icon://funny-icon możesz powiedzieć sap-icon://dparnas-icon/funny-icon.

Oto próbka realizacja:

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

Ponadto trzeba będzie określić font-family w CSS. To jest to! To proste, ale trudno znaleźć;)

Answer 2

Próbowałem dodanie ikony fontawesome do mojej aplikacji nadzieję, że to pomaga w generowaniu i używanie niestandardowych ikon

@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