How To Add Icons To Your Webflow Buttons
2020-06-12
I was recently building out a website for a client using Webflow. It was a simple landing page with a call button. Pretty standard stuff. Since the page was already pretty simple, I wanted to do something to ‘jazz’ it up a bit. What better than an icon? Everybody loves a good vector icon.
Icons like FontAwesome are really common and it is possible to set that up but I found a different method that is just as easy and I believe offers a bigger selection of icons to choose from.
First I went to FlatIcon.com to find the right ‘phone’ icon I wanted to use. I downloaded the PNG file and opened up Webflow.com in a new tab.
Now in the Webflow Designer, I clicked on the button that I wanted to add the phone icon to. I then selected the background image option and uploaded the PNG file of the phone icon I downloaded from flaticon.com.
I unchecked the ‘@2x’ checkbox:
I kept the size at Custom > Auto:
I repositioned it a bit so was right where I wanted it:
I set ‘tiles’ to none and selected ‘not fixed’:
I also moved the phone number text over to the right a bit by adding some padding on the left and that was about it. I was pretty happy with the result:
If you’re in NY State and need a good rate on car insurance, go ahead and give this man a ring! :)
Tweet