When using Bubble I couldn’t find a decent icon button plugin so I made one using Font Awesome and Bootstrap. I thought others might find this useful so I created a quick video.
Shared - HTML Header
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
Elements - initialize() function
function(instance, context) {
var btn = $('<button id="but" class="btn"></button>');
instance.canvas.append(btn);
function clickHandler(e) {
instance.triggerEvent("click");
e.preventDefault();
}
btn.on('click', clickHandler);
}
Elements - update() function
function(instance, properties, context) {
var btn = $(instance.canvas.children()[0]);
btn.addClass("btn-" + properties.type);
btn.html('<i class="' + properties.icon + '"></i> ' + properties.text);
}