Posts From Category: bubble

How to create an icon button plugin for Bubble.io using Bootstrap and Font Awesome

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> &nbsp;' + properties.text);
}

Read More