Adding Custom Social Media Icon to Menu

[marklaurence6275]

I'm trying to add a fourth social media icon to: http://www.valleypropertyimaging.com

I was using:

 

.menu-thumbtack {
	text-indent: -9999px;
	background-image: url(http://www.valleypropertyimaging.com/wp-content/uploads/2018/05/thumbtack.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 4px !important;
	width: 50px;
}

but I can't get the actual image to line up with the container.  Also, I tried variations on the "no-repeat" tag and it either repeats or vanishes entirely.

[Ingolme]

The width and height of the element should be 36px to match the image, but you've set the width to 50 and haven't given it a height. You can move the image if necessary using the background-position property, but the image is the correct size, so that shouldn't be necessary. You should keep the no-repeat rule because you don't want the image to repeat.

[marklaurence6275]

Hmm,

.menu-thumbtack {
	text-indent: -9999px;
	background-image: url(http://www.valleypropertyimaging.com/wp-content/uploads/2018/05/thumbtack.png) !important;
	background-repeat: repeat-no !important;
	margin-left: 3px !important;
	width: 36px;
  height: 36px;
}

So that's exactly what I put in and the attached image is what I see. I can't get the background-image to appear over the container. When I adjust the width to, say, 50, just to play with it, the background-image is right next to it and is repeating.

[Ingolme]

I can't tell what's going on there from just a screenshot. My  guess is that something else is creating a black circle which is covering your background image.

[marklaurence6275]

Sorry, should I have sent this one.

That's with the width set to 75px

[Ingolme]

Like I said, there probably is an element with the exact shape of a black circle that is covering up your background image. I'm going to take a stab in the dark and suggest using this code:

.social-menu .menu-item a {
  background: none;
}

You really should open the developer tools (by pressing F12 in most browsers) and look at the elements for yourself to see what they're doing. You haven't provided me with enough information so all I can do is make guesses. I don't know what HTML structure you're using to add the new icon, which is the most important part.

[acemindtech]

Hi...

Lngolme 

Amazing post thanks for sharing this post do you know best resources for protecting against domestic violence in Delhi