Comment faire pour afficher glyphicon/font-awesome dans sap.ui.core.Icon?

Question

Comme la collection d'icônes est assez limitée dans SAPUI5/OpenUI5, je voudrais afficher des glyphicons et/ou des icônes font-awesome dans un sap.ui.core.Icon.

Comment cela peut-il être réalisé? Pour pouvoir utiliser une icône externe dans un contrôle existant, vous pouvez utiliser le contrôle sap.ui.core.IconPool.

Answer 1

Le contrôle fournit une méthode addIcon pour ajouter une icône.

1. Liste item

   déclarer la balise font-face dans votre CSS

   font-face { 
       font-family: 'My-Icons'; 
       src: url('_PATH_TO_EOT_FILE_'); 
       src: url('_PATH_TO_EOT_FILE_?#iefix') format('embedded-opentype'), /*?#iefix is required to be added to the end of the path of eot file here*/ 
       url('_PATH_TO_TTF_FILE_') format('truetype'); 
       font-weight: normal; 
       font-style: normal; 
   }; 
   

   Incase si vous utilisez la police-awesome, vous pouvez inclure la styleshet de police-awesome en toi manifeste. La feuille de style sera inclus dans les déclarations font-face, entre autres, un peu comme ceci:

   @font-face { 
   font-family: 'FontAwesome'; 
   src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); 
   src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); 
   font-weight: normal; 
   font-style: normal; 
   } 
   

2. Appel sap.ui.core.IconPool.addIcon vous ajouter l'icône. Vous pouvez déclarer ce en vous Component.js

   sap.ui.define([ 
       "sap/ui/core/UIComponent", 
       "sap/ui/core/IconPool"], 
   function(UIComponent, IconPool){ 
       "use strict"; 
   return UIComponent.extend("com.sap.app.Component",{ 
   metadata : { 
       manifest: "json" 
   }, 
   init : function(){ 
       //call the init function of the parent 
       UIComponent.prototype.init.apply(this, arguments); 
       //Init Router 
       this.getRouter().initialize(); 
   
       IconPool.addIcon("battery", "fa", { 
        fontFamily : "FontAwesome", 
        content : "f241" 
       }); 
       } 
   }); 
   }); 
   

3. Vous pouvez maintenant utiliser cette icône que vous contrôlez

   <mvc:View controllerName="com.sap.app.controller.App" 
       xmlns:mvc="sap.ui.core.mvc" 
       xmlns:core="sap.ui.core" 
       xmlns="sap.m"> 
       <core:Icon src="sap-icon://fa/battery" color="#031E48" ></core:Icon> 
       <Button icon="sap-icon://fa/battery" press="onPress"></Button> 
   </mvc:View> 
   

Vous pouvez également consulter la documentation ici: https://help.sap.com/saphelp_uiaddon10/helpdata/en/21/ea0ea94614480d9a910b2e93431291/content.htm