Installation

Via npm:

npm

npm install font-awesome-openui5

Via Yarn:

yarn add font-awesome-openui5

Usage

  • In browser

    You can use this via CDN such as jsDelivr or unpkg.

    • jsDelivr:https://cdn.jsdelivr.net/npm/font-awesome-openui5
    • unpkg:https://unpkg.com/font-awesome-openui5
    <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<!-- Font Awesome -->
	<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

	<!-- OpenUI5 -->
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/1.58.4/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-libs="sap.m"
	>
	</script>

	<!-- Via jsDelivr -->
	<script src="https://cdn.jsdelivr.net/npm/font-awesome-openui5@^3"></script>
	<!-- Or Via unpkg -->
	<script src="https://unpkg.com/font-awesome-openui5@^3"></script>
</head>
<body>
	<div id="content"></div>
	<script>
		sap.ui.getCore().attachInit(function () {
			let button = new sap.m.Button({
				text: 'Send',
				icon: 'sap-icon://font-awesome-solid/paper-plane'
			});
			button.placeAt('content');
		});
	</script>
</body>
</html>

  • Node Module

    import FontAwesomeOpenUI5 from 'font-awesome-openui5';

// Load icons synchronously.
FontAwesomeOpenUI5.loadIcons();

// Load icons asynchronously.
FontAwesomeOpenUI5.loadIconsAsync();

Icon URI

Each Font Awesome icons styles have its own collection name in IconPool.

Example:

let button = new sap.m.Button({
	text: 'Send',
	icon: 'sap-icon://font-awesome-solid/paper-plane'
});

Note

You probably need to add some custom CSS classes to make icon show properly.

.fa-icon.solid .sapUiIcon:before {
	font-weight: 900;
}
.fa-icon.brands .sapUiIcon:before, .fa-icon.regular .sapUiIcon:before {
	font-weight: 400;
}
let solidButton = new sap.m.Button({
	text: 'Save',
	icon: 'sap-icon://font-awesome-solid/save'
});
solidButton.addStyleClass('fa-icon solid');


let regularButton = new sap.m.Button({
	text: 'Send',
	icon: 'sap-icon://font-awesome-regular/paper-plane'
});
regularButton.addStyleClass('fa-icon regular');


let brandsButton = new sap.m.Button({
	text: 'View on GitHub',
	icon: 'sap-icon://font-awesome-brands/github'
});
brandsButton.addStyleClass('fa-icon brands');