Skip to content

Instantly share code, notes, and snippets.

@bryandh

bryandh/.Font Awesome 5 icon binding issue.md

Last active May 16, 2018 10:09
Show Gist options
  • Save bryandh/672fbb164896cc72d0ed61d494ed04c2 to your computer and use it in GitHub Desktop.
Save bryandh/672fbb164896cc72d0ed61d494ed04c2 to your computer and use it in GitHub Desktop.
Download ZIP
Font Awesome 5 icon binding issue
Raw
.Font Awesome 5 icon binding issue.md
Raw
app.html
<template>
<p>Original (not working) '${iconClass}'</p>
<p>
icon => <i class.bind="iconClass"></i>
</p>
<p>Workaround (working) '${iconClassWorkaround}'</p>
<p repeat.for="icon of iconClassWorkaround">
icon => <i class.bind="icon"></i>
</p>
<p>Fix (simple)</p>
<p>
icon => <i innerhtml="<i class='${iconClass}'></i>"></i>
</p>
</template>
Raw
app.js
export class App
{
iconClass = 'fas fa-cog';
iconClassWorkaround = ['fas fa-cog'];
constructor()
{
// Normal icon change by class (not working)
setTimeout(() => {
this.iconClass = 'fas fa-arrow-left'
}, 2000);
// Change the icon using a *dirty* workaround (working)
setTimeout(() => {
this.iconClassWorkaround = [];
setTimeout(() => {
this.iconClassWorkaround = ['fas fa-arrow-left']
});
}, 2000)
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body aurelia-app="">
Loading...
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment