向 OpenUI5 添加新图标？

Question

我们需要向 OpenUI5 添加新图标。这些图标已被定义为基于矢量的字体。

我知道可以通过 https://icomoon.io/ 等服务将图标添加到 SAP 标准字体。但是，我希望能够在单独的文件中维护它们（这样我们就不需要在新的 OpenUI5 版本出现时重做任务）。

是否可以定义用于图标的附加字体？

Answer 1

正如您已经提到的，出于未来兼容性的原因扩展 UI5 字体不是一个好主意。如果您已经拥有自己的字体，您可以轻松地使用 UI5 注册它并使用类似的 url-schema 引用它。你可以说 sap-icon://dparnas-icon/funny-icon.

而不是 sap-icon://funny-icon

这是一个示例实现：

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

此外，您还必须在 CSS 中定义字体系列。而已！这很容易但很难找到 ;)

Answer 2

我尝试将 fontawesome 图标添加到我的应用程序中，希望这有助于您生成和使用自定义图标

 @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, font-family, unicode char code )//icon definition 
  sap.ui.core.IconPool.addIcon('register', 'customfont', 'fontAwesome', 'f0f3'); //adding new icon
})   

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

向 OpenUI5 添加新图标？

Add new icons to OpenUI5?

sapui5