Bubble.io Tutorial - Font Awesome Icons verwenden

Schritt-für-Schritt Videoanleitung, um Icons in Bubble zu verwenden. Im Detail: Font Awesome, Google Material Icons, Ionic Elements

Chris Strobl
Chris Strobl

In diesem Video gehen wir darauf ein, wie man Icons in Bubble verwendet. Font Awesome (https://fontawesome.com/) sind standardmäßig in Bubble integriert. Darüberhinaus zeigen wir euch drei Wege, um Icons in Bubble zu verwenden:

🪄 Icons8 (https://icons8.com/)

🪄 Google Material Icons

🪄 Ionic Elements

Bubble.io Tutorial - Font Awesome Icons verwenden

Video Transkript:
Hallo, mein Name ist Chris Strobl, ich zeige euch heute, wie ihr von OSM das Icon Toolkit im Bubble nutzen können. Von außen ist mit 38 prozent Marktanteil eine der größten Icon Libraries in der Welt und wir gehen jetzt durch, wie man das unterschiedlich nutzen kann. Und am Ende zeige ich euch noch drei weitere Beispiele für Icon.

Wir gehen jetzt rein in den Editor und in Visual Elements und wählen Icon aus Bubble kommt natürlicherweise mit den Font aus einem Icon. Was besonders spannend ist, ist hier wenn ihr Circle nimmt und das Icon rotieren lässt, habt ihr eine Lade Animation direkt im Bubble. Ihr seht auch, dass wir den Style des Icons ändern können und so einerseits die Icon Color ändern können, aber auch die Background Color des Icons verändern könnt. Background Kanaan und das Icon auf Blau und die Rotation wiederum aus.

Als nächstes möchte ich euch zeigen, wie wir in Bubble von außen in einen Text integrieren. Im Text Editor haben wir folgende Struktur Eckige Klammer f a für Fundorte dann den Icon nehmen und dann Fundorte mit einem Strich den Icon nehmen, kriegt ihr von der Seite. Das heißt, wir gehen auf Icon. Und ich will jetzt zum Beispiel Check aus. Das ist hier dieses und gebe ein. Und die sieht jetzt, wie wir hier dieses Icon haben.

Und wir brauchen jetzt noch diese drei Icon. Einerseits. Wellen wie hier das TIMSS aus, dann einmal Home und schließlich das Cock. Schließlich gehen wir in Richtung Editor und ändern noch die Farben. Und so können wir sehen, wie wir wunderbar von außen auch integrieren können in Texte. Ein weiteres Thema bei von außen ist, wie man von außen in Debatten integrieren kann. Wir stellen als erstes einen Button.

Und wir können leider kein Icon direkt als Rich Text in den Button integrieren, dass sie dir hier. Das geht leider nicht, aber es gibt einen wunderbaren Workaround, das heißt, wir machen den Button leer, das heißt kein Text Group Elements in der Gruppe. Wir nennen diese Group Group Button und wir fügen einen Text Element hinzu.

Und in diesem Text Element können wir nun analog zu vorhin wieder von außen verwenden. Ich nehme hier ein Beispiel. Und was wichtig ist, dass wir einerseits den Text zentrieren und dann auch hier noch markante Horizontal Center vertikal. Schließlich ist noch ein wenig hilfreich, etwas White Space, um die Gruppe zu machen, das heißt hier die Gruppe aus und macht etwas White Space auf den Achsen, die euch belieben. Und so habt ihr natürlich in von dem jetzt auch einen Button. Wir gehen jetzt noch kurz auf die Vor und Nachteile von OSM ein.

Der Vorteil ist einerseits, dass wir keine zusätzlichen Groups für die Formatierung brauchen und andererseits natürlich wir gesehen habe. Wir können das sehr schnell und leicht einbinden. Die Nachteile sind. Leider werden einige Icons nicht dargestellt und ihr hier sehen könnt. Auch Solid Icon dies eigentlich in von außen gibt, können wir leider nicht so im Bubble darstellen. Deswegen zeige ich euch noch drei weitere Beispiele im Bubble.io Icon einzustellen.

Das erste ist Icons8 ist eine Library an Icons und Illustration und ich zeige euch jetzt, wie man diesem Bubble verwenden kann. Wir wählen hier Chat Bubble aus und ihr seht, dass wir den Button mit HTML haben. Wenn ich hier auf Pastis Fragment in toujours html geht, anschließend dieses Kopieren. Gehen wir zurück in Bubble und könnt das html Element hinzufügen. Und in diesem HTML Element fügt dir dieses Image ein. Bei Icon at soll dir auf jeden Fall darauf achten, dass wir mit dem Responsive Editor und mit den Größen optimal verfährt. Dies ist natürlich nicht ganz so leicht wie mit den nativen Icon zu Bubble, aber es funktioniert.

Ein weiterer Weg Icon sind Bubble zu verwenden ist nun die Material Icons. Wenn ihr in der Plugin Library Google Material Icons eingibt, dann findet ihr dieses Plugin, was offiziell vom Bubble kostenlos zur Verfügung gestellt wurde. Ihr findet im Visual Elements Material Icon. Und könnt hier nun eigens auswählen und auch die Farben ändern.

Und schließlich ein drittes Icon Was ich persönlich sehr gerne mag, ist die Ioniq Elements, ebenfalls ein offizielles Plugins von Bubble und dieses hilft euch wiederum, wenn ihr in den Visual Editor geht und eine Icon eingibt. Dann könnt ihr auch sehen, dass dieses Icon ebenso sehr schön ist, wir gesehen habt, ist es super einfach und sehr flexibel im Bubble mit Icon zu arbeiten.

Und wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button oder das Script unseren Channel bei Fragen, nutzt die Kommentare und ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.

Features