[SnowdenPerthParticipant]

HI

I am trying to create a customised sidebar widget button with an icon. The font, sizing colour ect is correct but instead of having the icon image it is just giving me text (eg it shows the letters f103 instead of the actual image).

My code is below, could you please let me know where I am going wrong.

Thanks kindly

.x-btn.sidebar-anchor{
border: 0;
color: #124475!important;
font-size: 1.8rem!important;
text-transform: uppercase;
font-style: normal;
font-weight: 500;
margin-top: 0.01em;

padding-left: 0px;
padding-bottom: 10px;
border:0px;
text-shadow: none;
text-align: right!important;
}

.x-btn.sidebar-anchor:hover{
color: #1e73be!important;

}

.x-btn.sidebar-anchor:before
{
content: “\f103”!important;
margin-left: 0.35em;
font-family: “FontAwesome” !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

[ZeshanMember]

Hi there,

Thanks for writing in!

Please try inserting the CSS code in your child theme‘s style.css file. The icon code won’t work in the Customizer because WordPress strips backslashes.

If you don’t have a child theme installed in your site, please refer to this knowledge base article: https://community.theme.co/kb/how-to-setup-child-themes/

Thank you!

[SnowdenPerthParticipant]

That works perfectly. Thanks for your help.

[Nabeel AModerator]

Glad we could help 🙂

Cheers!

[Author]

Posts