Yes. for sure. But what html are you using now ? This works for me .. i replicated the example and it shows the icon when a msg is received.
<span class="fa-layers fa-fw" style="background: transparent">
<i :class="muelltonneIcon" style="margin-top: 10px; --fa-primary-color:blue; --fa-primary-opacity: 1.0"></i>
<span class="fa-layers-counter fa-5x" style="background: red">{{ msg.remainingdays }}</span>
</span>
ps. send us the complete html (remove your Subscription details) ,and the js
Here is the test i did that works
Flow:
[{"id":"106fa901.54cdcf","type":"uibuilder","z":"ac0f61dd.69e26","name":"","topic":"","url":"icon","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":false,"showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"x":1150,"y":540,"wires":[[],[]]},{"id":"724407fb.66f5a8","type":"inject","z":"ac0f61dd.69e26","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"icon\":\"fa-trash\",\"reminder\":\"fa-spin\"}","payloadType":"json","x":950,"y":540,"wires":[["106fa901.54cdcf"]]}]
Index.html
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title>
<meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template">
<link rel="icon" href="./images/node-blue.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head><body>
<div id="app" v-cloak>
<span class="fa-layers fa-fw" style="background: transparent">
<i :class="muelltonneIcon" style="margin-top: 10px; --fa-primary-color:blue; --fa-primary-opacity: 1.0"></i>
<span class="fa-layers-counter fa-5x" style="background: red">{{ msg.remainingdays }}</span>
</span>
</div>
<!-- These MUST be in the right order. Note no leading / -->
<!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->
<script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script> <!-- Dev version -->
<!-- <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js"></script> Prod version -->
<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<script src="./uibuilderfe.js"></script> <!-- dev version -->
<!-- <script src="./uibuilderfe.min.js"></script> prod version -->
<!-- OPTIONAL: You probably want this. Put your custom code here -->
<script src="./index.js"></script>
</body></html>
Index.js
'use strict';
var app1 = new Vue({
el: '#app',
data: {
msg: '',
muelltonneIcon: ''
},
methods: {},
mounted: function() {
uibuilder.start();
var vueApp = this;
uibuilder.onChange('msg', function(msg) {
debugger
vueApp.msg = msg.payload;
vueApp.muelltonneIcon= `fas fa-4x ${msg.payload.icon} ${msg.payload.reminder}`;
});
},
});
so my experience with VueJS etc. is next to none.
):
It seems that it's not a problem with pro vs. free icons and not with the way how to include fa (CDN vs. KIT). If I'm not using the fa kit but the CDN, I have the same problem.