Below are instructions on how to add icons if you are paying for pro icons within FontAwesome.
If you are not using pro icons, follow the FontAwesome guide here: How do I add vector icons from fontawesome.com to a Rocketspark website?
You will need a license with Font Awesome to use Pro icons and the details below.
-
Within your Pro account, find your unique customer ID number: Go to the setup instructions within your Font Awesome account and copy the 10-character-long code as shown below.
-
Copy the piece of code below needed for Font Awesome to work with Rocketspark
Replace the piece of code "bc03f02f80" with your customer ID number found in step 1
<!--<script src="https://kit.fontawesome.com/bc03f02f80.js" crossorigin="anonymous"></script>-->
<link href="https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css" rel="stylesheet"> - Add a new code block and paste the copied code.
-
This code will be hidden from the public - which will look like the below
- Within Font Awesome, find a pro icon and copy the HTML code provided. This code may look the below but it will be custom to your icon.
<i class="fa-solid fa-pen"></i>
- On your Rocketspark page, add a new Text Block.
- Choose if you want to add the icon to the heading or paragraph section and click the "source mode" icon <>
-
Paste the HTML Font Awesome code and save.
- Add any additional text and save changes again.
- Your icons will now display on the website - repeat for any other pages on your website