change the layout of the social media button on the default product page and css

Hello
I ask for your help to modify the structure of the product page of the hero slider demo I will use the page that comes by default, the default since it is the one that best suits what I need but I would like to change the social media buttons to the design of the alternative option and that they are aligned to the left since they have color and are more striking, I managed to change it in google with the option to inspect element but it is HTML code and I do not know how to edit it on the real page and I would feel better if i could handle it with css as i want to change instagram icon brown color and put its original color.
I’m using social media icons to follow

2. another question: additionally I made some CSS changes to place elements such as sku and categories in a single line, the same I did with the wish list, share and the size guide, I don’t know very well where to place the custom CSS since it meets 3 places to place it. What is the recommended place to locate it and that when there is an update they will not get lost? They are currently in custom CSS theme settings.

other options to locate it:
* appearance – theme editor – style sheet
* customizer – additional css

thanks for your attention

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

We can provide the custom CSS to set the background color, please provide product your site credentials and colors you want to set.

Best Regards

Thanks for your reply
I would like the social media buttons to look like the image

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .social-icons.icons-size-small li i.fa-facebook {
  width:30px;
	height:30px;
	margin:3px;
	background:#375490;
	text-align:center;
	padding-top:8px;
	border-radius:50%;
	color:white;
}
body .social-icons.icons-size-small li i.fa-instagram {
  width:30px;
	height:30px;
	margin:3px;
	background:#D61C99;
	text-align:center;
	padding-top:8px;
	border-radius:50%;
	color:white;
}

Best Regards

Thanks for the code!

I added it in the indicated place Theme Settings> Custom CSS> Global: but it didn’t work, it just turned red and said that the changes were saved and it didn’t work.

put the same code in the additional css customizer and if it worked on that part it sent screenshots of the error.

I don’t know if there is suddenly a problem in the future for adding the css code in another place

thanks for your attention.

Attachments:

You must be logged in to view attached files.

Hello,

Most likely you have errors above and that is why the styles do not work. Please provide correct site admin access. I cannot log in with the credentials you have provided.

Best Regards

Hello

Excuse me if I gave you the wrong password, here I write the correct input data I already tried them

Thank you

Hello,

Please provide the screen with the problem. 1. screen what you want, 2 screens what you have, and page URL.

Best Regards

[Author]

Posts