Docs

[playgroundmm]

Hello,

I’m adding a link to an Icon shortcode which is fine but I need to know how I also give it all the styling options that are available when you use the icon element (eg icon size, background size, background border radius, the various color options etc?

Thank you

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[playgroundmm]

Sure, still building this one so I’ll remove the under construction so you can see.

http://www.cosmetologymelbourne.com.au

I have the icon element to show the little down arrow with black background at the bottom of the fold, above the contact number. I want to add an anchor link to this to take the user further down the page.

cheers

[Christopher]

Hi there,

Thanks for providing us with URL.

Not sure which icon you’re referring to, but the code should be similar to the following :

<a href="#x-section-4" class="x-slider-scroll-bottom above bottom center"><i class="x-icon-angle-down" data-x-icon="" aria-hidden="true"></i></a>

Hope it helps.

[playgroundmm]

ok that’s cool thank you, but now how do I edit the colors?
If you look at the url again you’ll see i have a small down arrow inside a round black background with no stroke. I’d like to recreate that please.

thanks

[Christopher]

Hi there,

Please wrap icon within <a href="#contact"></a> tags and add a custom class.

e.g:

<a href="#" class="down-arrow"><i class="x-icon x-icon-angle-down" style="text-align: center; font-size: 30px; background-color: hsl(0, 0%, 0%); width: 50px; height: 50px; line-height: 50px; border-radius: 50px;" data-x-icon="" aria-hidden="true"></i></a>

Please add following code in Customize -> Custom -> Global CSS :

.down-arrow:hover{
color:red;
background-color:#fff;
}

Hope it helps.

[playgroundmm]

legend, thank you

[Jade]

You’re most welcome.

[Author]

Posts