How To Add Icon To Button Webflow

‍

Here is how to utilize fonts to easily add icons to buttons in Webflow:

1. Visit the Google Fonts website and go to the Icons section.
2. Locate the fonts download link.
3. Go to the fonts folder.
4. Click on the file variant you wish to download.
5. Click on the Download raw file button.
6. Now, inside the Webflow dashboard, click on the three dotted icon on your project thumbnail for options.
7. Click on Settings.
8. Go to the Fonts section from the left sidebar menu.
9. Scroll to Custom fonts and upload your icon font file.
10. Enter a name for the file and click Upload.
11. Once uploaded, your new font should appear under Installed fonts.
12. Inside the designer, go to the button you wish to add an icon to.
13. From the right sidebar menu, change its font from under the Typography section.
14. Select our new Google Icons Font.
15. Back inside Google Fonts, find or search for the icon you wish to use.
16. Copy the icon name within the span tags.
17. Select the text area in the button and enter the text for the icon.
18. You now have a button with an icon in Webflow. Since this icon is technically a text you can also edit it as such using colors, sizes, etc.