Hi there,
The code you used is correct but you used wrong quotation mark for the background URL. You used “
which is not valid in CSS. You need to use "
. See the difference between 2 characters I mentioned?
So if you change the code to:
i.x-icon-facebook-square:hover {
background: url("http://dev.terislater.com/wp-content/uploads/2017/11/50-black-typewriter-icon_02.png");
}
It will work. But please kindly consider that it might take few seconds to load the image as it tried to load an image on hover.
This is going to be a customization which is outside of our support scope but I want to suggest you use the CSS Spritesheet to achieve the same effect with the background positioning and having the image loaded, so you will not experience that delay.
To get started I suggest that you read this article:
https://www.w3schools.com/css/css_image_sprites.asp
So you will have the images all added to one big image and in each case, you will change the background position property of CSS to change the background position and show the different icon for each case. Also, you can do the same on hover and change the position of the background to show the hovered version of the icon.
For further reading regarding this:
https://www.google.nl/search?q=css+spritesheet&oq=css+spritesheet&aqs=chrome..69i57j0l5.3159j0j7&sourceid=chrome&ie=UTF-8
We will not be able to implement the feature for you but I thought I give you the starter hints so you can develop it yourself.
Thank you,