I want to put icons before phone,email in footer widget

[shinglai]

Hi, I have contact info and map in footer widget1. I want top put some icons(like phone icon before the number and envelope before mail) on the widget. Is it possible? Can you help?. Thanks.

http://www.e-maheikhol.com

[Prasant]

Hello @shinglai,

Thanks for asking.

Yes, you can add following CSS code in X > Theme Options > CSS to add icons:

.confit-address:before {
    content: "\f2bb";
     margin-right:5px;

}
.confit-phone:before{
    content: "\f095";
    margin-right:5px;
}
.confit-email {
    content: "\f0e0";
    margin-right:5px;
}

You can get the icon codes from following source. https://fontawesome.com/cheatsheet

While checking the website, I think instead of using default theme Red color, you can use the shade of Red that’s there on the website. Here is the HEX code for the red color that’s there on the website #c33a50. Just a personal input and feedback.

Let us know how it goes.

Thanks.

[shinglai]

Iam not able to set up the icons. I put the css already can you please check it out again. And also when you say default theme color red, do you mean all those links color?

[Alaa]

Hi shinglai,

Sorry for that, please update the CSS code to include font-family: "FontAwesome"; so that your final code should be:

.confit-address:before {
	content: "\f2bb";
	margin-right:5px;
	font-family: "FontAwesome";
}
.confit-phone:before {
	content: "\f095";
	margin-right:5px;
	font-family: "FontAwesome";
}
.confit-email:before {
	content: "\f0e0";
	margin-right:5px;
	font-family: "FontAwesome";
}

My colleague Prasant means that you can use the same shade of the red color in the logo instead of the default red color, if you want to give it a try, you can change that in (X > Options > Typography). That’s just a personal input, nice website!

Thanks.

[shinglai]

that worked. Thanks a lot.
andsome more question . seems like some product image are not in the same height with other image. Can you please check it? Screenshot…

The image size seems to be very big in single product page so from chrome inspect element i change the width of the image to 50%
img {
max-width: 50%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Will this give problem anywhere on the site?

[friech]

Hi There,

Yes, it might cause an issue because of the selector img all images will be affected by that that CSS. Please update that to:

.single-product img {
	max-width: 50%;
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

If you have a follow up question, We kindly ask to create a separate thread for a different issue.

How To Get Support

Thanks,