ui5-fontawesome

A Font Awesome plugin for OpenUI5/SAPUI5.

Usage

Bootstrapping

Hosting On-Premise

1. Download the package and put it somewhere in your app folder (please keep the folder structure).
2. Add the following to your HTML after the bootstrapping of OpenUI5 (change src accordingly):

   <script
     src="../node_modules/ui5-fontawesome/js/ui5-fontawesome.min.js"
     id="ui5-fontawesome">
   </script>

   The id="ui5-fontawesome" is required. Additionally, if the folder is not named ui5-fontawesome, you need to specify the path to the package relative to the HTML file by adding a data-resourceroot attribute. For example:

   <script
     src="../not-ui5-fontawesome/js/ui5-fontawesome.min.js"
     id="ui5-fontawesome"
     data-resourceroot="../not-ui5-fontawesome/">
   </script>

Bootstrapping from CDN

Add one of the following to your HTML after the bootstrapping of OpenUI5. Note: It is advised to specify at least a major version to avoid breaking your app, change ^1 to your desired semver range accordingly. Additionally, you may want to pinpoint a specific version if you wish to use SRI check.

jsDelivr

<script
  src="https://cdn.jsdelivr.net/npm/ui5-fontawesome@^1/js/ui5-fontawesome.min.js"
  id="ui5-fontawesome"
  data-resourceroot="https://cdn.jsdelivr.net/npm/ui5-fontawesome@^1/">
</script>

UNPKG

<script
  src="https://unpkg.com/ui5-fontawesome@^1/js/ui5-fontawesome.min.js"
  id="ui5-fontawesome"
  data-resourceroot="https://unpkg.com/ui5-fontawesome@^1/">
</script>

Use in Views and Controllers

To use the font in UI5 application, prepend fa-brands/fa-regular/fa-solid, depending on your desired style, to the icon name (only free icon-style combinations are supported):

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core">
  <core:Icon src="sap-icon://fa-brands/font-awesome" size="2.5rem" color="#339AF0" class="sapUiTinyMargin"/>
  <Button icon="sap-icon://fa-regular/closed-captioning" class="sapUiTinyMargin"/>
  <StandardListItem icon="sap-icon://fa-solid/award" title="This is awesome."/>
</mvc:View>

sap.ui.define([
  'sap/ui/core/Icon'
], function(
  Icon
) {
  return new Icon({
    src: 'sap-icon://fa-brands/font-awesome',
    size: '2.5rem',
    color: '#339AF0'
  });
});

Changelog

See CHANGELOG.md.

License

The code contained in this repository is licensed under MIT license.

Additionally, the distributed package contains part of the Font Awesome free package, you can find the license from their repository or fontawesome-free/LICENSE.txt in your download.

This project is not endorsed by or affiliated with either Font Awesome or OpenUI5.