SAP-Icons mapping in Axure

Discussion Forum Design & UX SAP-Icons mapping in Axure
Viewing 5 posts - 1 through 5 (of 5 total)
Wongdoody

Greetings,

I have installed the SAP fonts and Axure libraries, and I have configured the “design stencils” as per the instructions on this resource: https://experience.sap.com/fiori-design-web/downloads/

Very helpful guide, by the way.

In the “Generate HTML” dialog in Axure, “Web Fonts” tab, I have added the @font-face code for 72-Regular and 72 Bold, as per the directions. (I am not unfamiliar with this step, having used it with FontAwesome in previous projects.)

Now…in the screen capture I can see a third mapping to SAP Icons, but there is no instruction or code sample given for creating the mapping to the web source for font family SAP-icons.

So I’m stuck. The designs look fine for me because I have the SAP-icon set installed on my Mac. But to anyone viewing them on Axure Share it looks like garbage.

Does anybody have the code? Please attach to this thread. OR, even better, update the page on SAP.

Much obliged.

Senior UX Designer
SAP SE

Hi Alan,

 

thanks for bringing this up! This was definitely missing!

The code is pretty much the same just with the name of the SAP-icon font. But we verified it again, of course.

We’ll do you one better: I’ll post the code here AND update the site itself as soon as possible 😉

I hope that helps,

All the best,

Till

 

font-family: ‘SAP-icons’;
src: url(‘fonts/SAP-icons.woff’) format(‘woff’),
url(‘fonts/SAP-icons.woff2’) format(‘woff2’),url(‘https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/SAP-icons.woff’) format(‘woff’),
url(‘https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/SAP-icons.woff2’) format(‘woff2’),
local(‘SAP-icons’);

Hexaware Technologies

Hi Tillman,

I have a similar issue as Allan, with the font mapping in Axure. I have instralled all the Fiori fonts, and loaded all the libraries from Fiori Design Stencils and correctly followed all steps for Font embedding & mapping as mentioned at this link https://experience.sap.com/fiori-design-web/downloads/

The icons display proper within Axure, but when published to Axshare the icons show up as outlined boxes.

url: https://mh2tgf.axshare.com/#c=2

Any help would be greatly appreciated, as I am using the Fiori Design Stencils in my current project

 

Best Regards,

Andrews

Senior UX Designer
SAP SE

Hi Andrews,

 

It seems to work on my machine. The source code also suggests that the link to the webfont works.

Could you test it on some different machines?

 

All the best,

Till

Hexaware Technologies

Hi Tillman,

It will work on your machine because you would have the SAP font icon .ttf file and other .ttf font files from the Fiori Design Stencils already installed on your machine. But if you check the axshare link on some other machine you will notice the icons do not show load, and are just seen as outlined boxes

for e.g. please check the below axshare link on a machine which do not have the SAP font files

https://mh2tgf.axshare.com/#c=2

I have tried all possible options but the SAP font icons do not show up on a machine where the font files are not installed. I have emailed this issue to the SAP fiori team

at fioridesign@sap.com but still waiting to hear from them. But do let me know if you have a workaround for this font issue.

 

Best Regards,

Andrews

Viewing 5 posts - 1 through 5 (of 5 total)
 

You must be logged in to reply to this topic.