You can add icons to your website through the online tool Font Awesome via embedding some HTML code to your page - Icons are great tools for website design as you can create a row of icons to quickly get across key information in a way that is more visually engaging than a bulleted list.
Font Awesome has super helpful online libraries with millions of icons to choose from. The benefit of Font Awesome is that you can adjust the icon's size and colour via the website Stacks Specific Design Controls.
**Please note, if you are using a FontAwesome Pro, additional steps are needed. Please find details here: How to add "Pro" FontAwesome icons to your website
Walk-through tutorial - Click "Get started"
(To make this tour bigger, click the arrows on the right or zoom in)
Instructions for Fontawesome - Free icons (pro details above)
-
Copy the piece of code below needed for Font Awesome to work with Rocketspark
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
- Add a new code block and paste the copied code.
- This code will be hidden from the public - which will look like the below
- Log into Font Awesome or create a new account https://fontawesome.com/
- Find an 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.