Skip to Content

Use Of SAP Fiori Icons in SAP Design studio app

Hi Experts,

I am using SAP fiori Icons in design studio app. But some of the icons are not visible when I use it in design studio. May be because I need to follow defined class name only. But in the icon explorer I can only see the ID, not the class. As per my knowledge Class can be any string.

Example

Icon: Refresh : e010 is working fine with the below class code:

.ICON_REFRESH:before { font-size: 22px; font-family: 'SAP-icons'; content: "\e010"; speak: none; color: #00aced; }

Icon: Expand group:e1f9is not visible in the design studio application:

.ICON_GROUP_EXPAND:before { font-size: 22px; font-family: 'SAP-icons'; content: "\e1f9"; speak: none; color: #ee2e24; }

Design Studio version: 1.5 on BOBJ 4.2 connected with HANA sps9 rev-97

Can you help me in this.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Nov 14, 2016 at 09:37 AM

    1.5? 1.6 has been out for a very long time; is there a chance for you to upgrade to 1.6 SP3?

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 14, 2016 at 09:58 AM

    Hi Tammy,

    Thank you for reply.

    If we upgrade to 1.6 will it solve the issue?

    Do we have any SAP document on this.

    Regards

    Rajender Singh

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 14, 2016 at 10:24 AM

    If you can share some screen shots, I will try this in 1.6

    Use the image icon to upload

    You can take a look at the SAP Help http://help.sap.com/businessobject/product_guides/AAD16/en/ds_16SP03_user_en.pdf - I do know there was investment in m mode for 1.6 which *may* help.

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 15, 2016 at 02:33 AM

    Hi Tammy,

    Please find the image.

    The yellow block I marked to show the icon space. but the second box is empty because it include Fiori ICON chart_table_view(id: e262), which is not visible.

    On the other hand the bar icon is visible.

    Regards

    Rajender Singh

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      HI Rajendra,

      In 1.6 we have Icon component we can use that instead of FIORI icons . it may cause some issues at run time which i have faced when i am using 1.5

      I recommend to upgrade 1.6 or else instead of FIORI icons use image component

      Thanks,

      Varun

  • Nov 16, 2016 at 01:43 AM

    Hi Rajender,

    Since you are using the CSS approach of displaying icons by applying classes to text elements, you must have uploaded the sap-icons font files with your application. The most likely reason the chart-table-view icon you have found in the Icon Explorer is not visible is probably because the sap-icon font files in your application are an older version. To access the newest icons, I suggest you follow these steps:

    1. Download the latest OpenUI5 Run-time from the following link and unzip the file:

    https://openui5.hana.ondemand.com/downloads/openui5-runtime-1.40.10.zip

    2. Locate the sap-icon font files in the folder path: openui5-runtime-1.40.10/resources/sap/ui/core/themes/base/fonts

    3. Replace the sap-icon font files in your application with the new ones from Step 2 above.

    I can confirm that upgrading to Design Studio 1.6 SP3 in itself will not resolve the issue because the built-in font files DO NOT include the chart-table-view icon as the version of UI5 is not recent enough for the newest icons. The steps I have outlined above, applied to your Design Studio 1.5 application should resolve your issue.

    Regards,

    Mustafa.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Rajender,

      When you are working in local mode, these files should be in the application repository folder. Then they would automatically be uploaded to your BI server when you publish to the BObj Platform.

      If you are not able to find the location of the font files on the BI server you should check with your system administrator or the developer originally responsible for deploying the BI app to the server.

      Alternatively, you could export the BI app from the server to your local PC, update the font files in the application repository, test and then republish to the server.

      Regards,

      Mustafa.