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