How to use SAP icons in Mendix project?

0
Hi, I am using the SAP Fiori UI package to create apps with Fiori look & feel. Unfortunately the SAP icon set is missing. I searched in the community for solutions, but all of them had examples with FontAwesome or SVG files. However, I can only download the SAP icon set as a .ttf file (also not including any css files etc.): https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons Has anyone an idea how to import the SAP-icons.ttf file in an Mendix project and make use of the icon-set? Best regards, Ömer
asked
4 answers
1

It should work with the .ttf file in combination with SASS. Take a look at this post here: https://forum.mendix.com/link/questions/8865 .  It should walk you through using the custom ttf font.

answered
1

I just noticed: you have to remove the x in the unicode reference. So, \xe05a needs to be \e05a . Then it should work, if you referenced the font correctly in your _base.scss file.

answered
1

I would create a really simple test page, and use some inline CSS to test it. Perhaps even create an html page on your local machine, just to test the custom font and the unicode for the icons.

answered
0

Hi Nikolaus,

thanks, I think that helped a lot, but I am still struggling. What I did so far:

  1. Moved the SAP-icons.tff file to the fonts folder
  2. Edited the _base.scss file 
  3. Complied it with Scout (which generated a new custom.css, including the Font-Family “SAP-icons” and the path to the font (“../../../fonts/SAP-icons.tff”)
  4. I wanted to change the glyphicon of an referenceselector and used this code
.mx-referenceselector > .btn > .glyphicon.glyphicon-share-alt::before {
	content: "\e093";
}
  1. That worked for me, but of course I want to use an SAP-icon, so I looked on the SAP Icon explorer (link in my first post) and took the unicode and entered it as a content. But that didn’t work. The code looks like this:
  2. .mx-referenceselector > .btn > .glyphicon.glyphicon-share-alt::before {
	font-family: "SAP-icons" !important;
	content: "\xe05a" !important;
}

    How can I test that the import of the SAP-icons worked and how can I use those items?

answered