CMS Development

bbeard42
Member

Hubspot slider arrows

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?

0 Upvotes
1 Reply 1
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Hubspot slider arrows

Hi @bbeard42,

yes there are some ways to remove the circle. Personally I would do it like this:

 

1. First add FontAwesome(if you haven't already) to your Hub. The newest one is this one

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

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:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 

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

content:"" !important ;

 

If you want other icons you can look them up on the pages of FontAwesome5 or FontAwesome4

 

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 "" 

 

 

 

best, 

Anton

Anton Bujanowski Signature