Footer Styling Question

I found when styling a footer widget some confusion with the CSS styling. I’m trying to keep my text elements centered and found the following code throwing this off:

.widget_text .h-widget:before {
    content: "\f054";
    padding-right: 0.4em;
    font-size: 0.925em;
}

If I disable content: “\f054”; through the code browser inspector I get the look I need but not sure how to remove this content code or where its located.

Footer reference: https://rocketboysolutions.com/applsys/

Thank you for your help

Hello Bryce,

Thanks for writing in!

To override the content that suppose to display the icon or completely disable it, you can use display: none;.

.widget_text .h-widget:before { 
     display: none;
}

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

I used a theme directly from the template. No icon was ever displayed. When I add the above code it doesn’t correct the issue of alignment and does nothing. Since your code will not allow the element to simply center I don’t understand how this is out of scope?

Hello Bryce,

Normally when the icon displays, it is like this:

Since you used a demo template, there were some custom CSS added in the template which hides away the icon.

Actually, you may added the code incorrectly. When you add the code, it should remove the icon area thus making the headlines display at the center.

Please put again the code, make sure to clear all your caches and check the footer widgets again. Kindly keep the code in there so that I can check it as well.

Best Regards.

1 Like

Thank you for the help, I got the display code to work with: h4.h-widget::before {
display: none;
}

You are most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.