Twitter / X Icon in Helix Ultimate - Forum | JoomShaper
Staff replied Helix Framework

Twitter / X Icon in Helix Ultimate

Asked by Addington 1 year ago Last activity 1 year ago

I am trying to enlarge the social icons in the footer of my website but although its easy to change everything else (facebook etc) by editing the font size, the X icon stays tiny.
I looked through your documentation and using the tip here, I added the code to the custom.css file:-
https://www.joomshaper.com/documentation/helix-framework/customization-tips
.fa-twitter::before { content: url("/images/x-twitter.svg"); width: 40px;
display: inline-block; height: 40px; vertical-align: -0.125em;}

but it doesn't work.
I have tried clearing all the caches, but that's not the problem.

Can you tell me what i am doing wrong please?

8 replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
1 year ago · edited

Hi Charles.

It was tip for older versions. In your case , your Joomla loads FontAwesome v6 so you can do that in easier way.

Just override old Twitter Icon class with a new one.

Paul Frankowski Senior Staff
1 year ago · edited

A NEW & Universal tip should be

.fa-twitter::before {content: "\e61b"; font-family: "Font Awesome 6 Brands"; }

OR More robust version

.fa-twitter::before {content: "\e61b" !important; font-family: "Font Awesome 6 Brands"; }

and yes, you can remove old CSS code. I also updated Helix guide.

Addington Asked this
1 year ago

code below

Paul Frankowski Senior Staff
1 year ago · edited

If you have a new "X" icon already, relax and forget about worries :]

Maybe it's from template file itself.

Addington Asked this
1 year ago

the problem is that the twitter icon is tiny and i want to make it bigger. i'll keep looking - it must be there somewhere.

Addington Asked this
1 year ago

you can see the problem better here (a dev site that i will delete in a few hours)

Addington Asked this
1 year ago

more

Paul Frankowski Senior Staff
1 year ago

FontAwesome icons can be resized by font-size value

SVG Icons - You can apply CSS styles to resize them (width & height value) OR by Using Inline SVG Attributes.

Ask chatgpt for details.

Log in to reply.