[Support request] Transparent background for Lightweight Social Icons by Tom

[alberto-salas]

Hi!
My website has the element “Home Page Hero – Merged”. I am using the starter site from the Site Library called Merch.
With Simple CSS I am making this header semi transparent:

.site-header {
background-color: rgba(255,255,255,0.5) !important;

So, when I try to use the plugin “Lightweight Social Icons by Tom setting”, I place the widget in the header, but then the background of the social icons don’t match the semi-transparent background of the site header.
All I need is to have the background of the social media icons transparent or set the background to rgba(255,255,255,0.5) so it matches.

How can I do this?

[Ying]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[alberto-salas]

Hi Ying!

Absolutely!
Please find the link attached in the Private Information field

[Leo]

Hi there,

Try this method to add icons in the menu items:

I would recommend to use Font Awesome plugin, after their recent update, we’ll be able to use SVG icon from fontawesome website, and it only loads the icon you use.

Try to follow the steps below:

1. Install Font Awesome plugin, activate it, and enable SVG option.
https://www.screencast.com/t/jIQGjaxQS

2. Go to fontawesome.com find the icon you’d like to use, copy the html link.
https://www.screencast.com/t/lB6gUBxBQo3

3. Go to Appearance > Menu, add the icon as a Custom link into your menu.
https://www.screencast.com/t/lB6gUBxBQo3

Then the icon will show in the menu location you assigned to.
https://www.screencast.com/t/eLjBuezZ7WQ

Let me know if it works!

[alberto-salas]

Thanks Leo,
I followed the steps provided, and copied the HTML link (in my case; <i class=”fa-brands fa-instagram”></i>)
But I don’t know where to paste this link!
Custom Links have two options (boxes); one for the URL and the second one for the “Link Text”, but I don’t want a text, I need the Icon instead.

Where am I supposed to paste the HTML code snippet?

If I paste in the box URL it would look like this: https://<i class=”fa-brands fa-instagram”></i>

[Leo]

The HTML would go into the menu label field.

[alberto-salas]

I’m sorry, but this didn’t work.
Is there any other way around it? …Perhaps using the plugin “Lightweight Social Icons by Tom setting” or any other similar plugin?
All I need is social media icons in the navigation bar with transparent background!

Thanks!

[Leo]

Sorry what didn’t work?

I don’t see a menu item with FA icon HTML added currently.

Can you add it in so I can try to identify the issue?

[Author]

Posts