This guide will teach you how to add a custom icon directly within a text element using Bubble. In Bubble, you’re more than likely familiar with the process of adding an icon next to a text element. What you might not be aware of, however, is the process of positioning that icon directly inside a text element.
The process of adding an icon into a text field includes:
- Using HTML to format an icon
- Styling the icon using the rich text editor
- Styling the icon with custom HTML
Full Transcript of Tutorial
1. Adding an icon within a text field
When you’re working in Bubble, it’s possible to use a group to house both an icon and a text element beside each other. This process, however, is a little cumbersome as it requires you to use a series of different elements.
As an alternative approach, you can save time by placing an icon directly within a text element. This process leverages some basic HTML formatting.
In a real example, you can see that we’ve added the syntax for the icon directly around our text. To replicate this, you’ll need to first select which icon you’d like to display.
To source the name of an icon, just add an icon element to your page, then search through Bubble’s default icon library. Once you select an icon, you’ll see the name of this positioned between the [fa] [/fa] fields.
In our example today, let’s select a basic circle icon. Based on the name of this icon, we know this is called ‘dot-circle’.
After sourcing the icons name, we can now select back into our text element. Within this, we’ll then add a short string of HTML code. Thankfully, this code is relatively easy to interpret. We’ll just need to start by adding an open square bracket, followed by the letters ‘f’ and ‘a’, then a closed square bracket.
Following this, we’ll then add the name of our icon, which was ‘dot-circle’. After adding the icon name, we’ll close the HTML formatting by adding another open square bracket, followed by a forward slash, the letters ‘f’ and ‘a’ once again, and finally, a closed square bracket.
At this point, your HTML code should look like this: [fa]dot-circle[/fa].
As you’ll then see, this HTML code will automatically format and display an icon within your text element.
2. Styling the icon using Bubble’s rich text editor
As we add our icon into the text element, you may notice that the formatting of this element looks quite basic. Thankfully, it’s possible to customize this using Bubble’s native rich text editor.
The rich text editor allows you to style both the icon and text element using a visual interface. Behind the scenes, it will add more custom HTML to your icon.
To demonstrate this, we’ll set the color of our icon to red. Simply select the font color menu, then choose one of the pre-provided options.
While we’re here, we can also update the size of the icon. If we select from the font size dropdown menu, we’ll update our icon to be the size of a large heading.
If we then select to save this, you’ll see that Bubble has automatically added the HTML code inside the input field of your text element.
3. Styling the icon with custom HTML
Now, while we have the ability to customize our icon using the rich text editor, you might find that the options provided are quite limited. At this point in time, we’re restricted to a finite number of colors and font sizes.
What happens if we wanted to style our icon with a specific HEX color? How could we even select a more specific size for the element?
Thankfully, as we’re working with HTML, you’ll have the ability to fully customize your icon directly within the text element.
By adding your own custom HTML formatting, you could set the size of the icon to be something specific like 3.4, or even 2.99.
If we wanted to customize any additional attributes of the HTML, we can simply source the relevant code to power this experience.
Using a site like W3 Schools, you can easily search and copy custom HTML code. The website simplifies the process of having to write the HTML from scratch yourself.
For example, if you wanted to format your icon as superscript (which makes your icon smaller), you can copy the HTML code directly from W3 Schools, then paste it within your Bubble text element.
Of course, you’ll just need to remember to format your HTML appropriately. To do this, always remember to start by adding the ‘[fa]’ syntax, then complete the code with another ‘[/fa]’.
And just like that, you can completely customize the formatting of your icon that sits inside a text element.
While this process did require us to use some basic HTML, thankfully Bubble helped alleviate some of the complexity.