Is there a way I can remove the small circle arrows that appear on either side of the image of the Hubspot image slider, so the images just slide on their own?
I would recommend to add it in your portal settings(cog icon in the upper right) => Website => Pages => Website-Header-HTML. This allows you to use the icons on every page in your portal.
Caution: If you use an older FontAwesome(in your theme or manually added) this can screw some icons to show up!
So if you use an older one(most likely 4.X) use this link instead:
2. After you've inserted the code and have saved go to your main CSS file(or the one which is attached to the template you want the arrows to change) and add this lines at the very bottom:
.slick-prev:before{
font-family:'FontAwesome'; content:'\f053'; /* This is the unicode for the left icon */ }
.slick-next:before{
font-family:'FontAwesome';
content:'\f054'; /* This is the unicode for the right icon */ }
Save the CSS and take a look on your new slider arrows 🙂
If they don't show up there's most likely another CSS file overwriting them. To get to your desired result you can:
- change the CSS loading order (only if you know what you're doing and your're prepared to do troubleshooting and CSS optimization)
- go with the sledgehammer option and add an "!important" (without the "") rule. Your code should look like this
If you gonna be using FA5 - simply click on the desired icon and click on the unicode(located left above the big preview of the icon). After that paste it in the corresponding content line between the ""