.png){kind=icon}
How do I add icons to my message? - QAB
There are many services that offer icons. This guide walks you through setting up a free account with Font Awesome so that you can then add them to the Quick Announcement Bar.
To begin, visit https://fontawesome.com/ and click "Start for free"
Then enter your email address to create a free account and they will send you a confirmation:
After confirming, you are sent back to the site. Here you can copy a line of code that links to your new free icons account. Copy that line of code:
You can paste that line into your theme's code, in the <head> section if you are familiar/comfortable with theme editing. Or you can add it to the bar itself. I'll cover both.
Inserting the code inside the theme (recommended for faster load):
Enter theme editing by going to your themes page and clicking the ellipsis, then Edit code:
Once inside, open the Layout folder and then the theme.liquid file.
In theme.liquid, go to the end of the <head> section by finding </head>.
Just above that line, past in the code from Font Awesome, like so:
Inserting the code inside the bar:
Alternatively, if you prefer to not to edit the theme, you can add that code to the bar configuration in the custom code area:
Now, go back to the Font Awesome site and search for icons:
To see only Free results, click on the lightning icon:
Click on the icon you want to use and a page will open up with a code to copy:
Once you've copied that code, paste it into the message in the Quick Announcement Bar:
When the page renders, the icon replaces that code:
If you require further assistance, contact us for support at help@hextom.com