[beezeebeeParticipant]

Hi,

I built a sub-site and the anchor icon is not showing. (http://katalyst5.com/wp/learn/en/)

When I inspect the element, it showed its size to be 0px by 0px.

I added some CSS in CUSTOMIZE/CUSTOM to try to force it to show (see below), but it’s not working.

Any ideas?

Thank you!

/* appearance of scroll top button */
.x-scroll-top {
border: 4px solid #d33333 !important;
color: #d33333 !important;
align: right !important;
background-color: #ffffff !important;
}

/** NOT WORKING **/
.x-icon-angle-up {
color: #d33333 !important;
width: 27px !important;
height: 17px !important;
}

[RupokMember]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-icon-angle-up::before {
  content: "\\f106";
}

(If the content (\\ f106) get formatted, let’s use the unicode value from here – http://fontawesome.io/icon/angle-up/ )

You choose other icon from here too – http://fontawesome.io/icons/

Hope this helps.

Cheers!

[beezeebeeParticipant]

It works. Thank you!!

[FriechModerator]

Hi There,

Just a bit info about this. Customizer remove one backslash (/) every time you save your customizer settings, with that said you need to update the code and add one / every time you save.

Maybe you want to add the css code on the style.css file of your child theme instead, to save you time of adding backslash. On the style.css the given CSS code would have only one backslash.

.x-icon-angle-up::before {
  content: "\f106";
}

Glad we could help, Cheers!

[beezeebeeParticipant]

Thanks! I put it in the style.css after the line

@import url( ‘../x/framework/css/site/stacks/ethos.css’ );

and it works.

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts