How can I select and modify buttons with the combination of classes 'secondary button' and 'angle-right' in Webflow, and append an icon from Font Awesome to each of these buttons?

Published on
September 22, 2023

To select and modify buttons with the combination of classes 'secondary button' and 'angle-right' in Webflow and append an icon from Font Awesome, follow these steps:

  1. Log in to your Webflow account and open your project.
  2. Navigate to the page where you want to modify the buttons.
  3. Select the buttons you want to modify. You can do this by clicking on the button element within the Designer or by selecting it in the Navigator panel on the left side of the screen.
  4. In the Style panel on the right side of the screen, click on the "+" icon next to the "Class" field. This will allow you to add a new class to the selected buttons.
  5. Enter the class name "secondary" (without quotes) and press Enter. This will add the "secondary" class to the selected buttons.
  6. Click on the "+" icon again and enter the class name "button" (without quotes) and press Enter. This will add the "button" class to the selected buttons. Now, the buttons have the classes "secondary" and "button" assigned to them.
  7. To append an icon from Font Awesome to the buttons, you can use Webflow's custom code feature. Open the Custom Code settings for your project by clicking on the gear icon in the top-right corner of the Designer and selecting "Custom Code" from the dropdown menu.
  8. In the "Head Code" section, paste the following code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-eXiBwxmc/d1v+n+5Q7+mV6Sc3iu2zIIIFmCuDR43rTCuTz3VWR/qBdrX8m6rUuKC" crossorigin="anonymous">
  1. Click on the "Save Changes" button to save the code.
  2. Now, you can use Font Awesome icons within your buttons. Select each button, and in the Style panel, click on the "+" icon next to the "Text" field. This will allow you to add custom code to the button's text.
  3. In the custom code field, enter the following code:
<i class="fas fa-angle-right"></i> Button Text

Replace "Button Text" with the desired text for your button.

  1. You can modify the size, color, and other properties of the icon and button text using the Style panel's settings.

By following these steps, you can select and modify buttons with the combination of classes 'secondary button' and 'angle-right' in Webflow and append an icon from Font Awesome to each of these buttons.

Additional Questions:

  1. How can I add Font Awesome icons to buttons in Webflow?
  2. Can I use multiple classes on a button in Webflow?
  3. How do I add custom code to my Webflow project?