TUTORIAL: Use custom SVGs as a text font in bubble. Upload your own iconfont to easily change the color of SVGs and much more!

Hey everyone,

Below I am posting a video that is a tutorial on how to create a custom iconfont and upload it to bubble which allows you to use SVG icons as text instead of an image (much like the limited font awesome capabilities that currently exist). This solves so many issues like having to use multiple images to change the color of an icon. It also allows you to smoothly animate the color of your SVG icons using the transition properties of standard text.

Let me know if you all would like to see this functionality made into a plugin!

Caution with this… Running into performance issues with this method. Looking into a faster loading solution. Otherwise, going to need a pageloader to make this worth it.



Super cool! Does this let you change the font sizes (icon size) and also what is the process like if you want to make changes or add new icons? Is it just to upload it on fontello and then done or do you have to do this entire process every time you add icons? Thanks!

Yes you can change Icon size!

And adding icons does require you to repeat the process :frowning:

Im going to look around for a cloud service that allows you to change the font at the source

I have seen on past forum posts you wrestling with similar issues

After going ahead and implementing this it I am having some issues with time needed to load the font. Looking for a better implementation. I’ll let you know what I find.

1 Like

Honestly I would love to see this made into a plugin! It could allow to animate text finally!!