Add my own icon on header

I’m trying to insert a flag icon in the social icons in order to link to my page in Spanish. I’ve use the snippet (http://presscustomizr.com/snippet/adding-custom-social-profile-link-icon-header/) like in Example 2, but in my function.php file I write:
<a class="social-icon custom-icon" href="http://ortizbotellaabogados.es" title="Spanish" target="_blank"></a>
And in the custom CSS section:

.custom-icon:before {
	content: "";
	width: 20px;
	height: 15px;
	display: inline-block;
	background: url('http://ortizbotellaabogados.es/eng/wp-content/uploads/sites/6/2016/03/Spain.png') no-repeat;
	background-size: 18px 18px;
}

In the customizr preview it looks fine, but when I save it, the image doesn’t appear in the web, although the link is, but on “white”.
When I go to the custom CSS again, the code have changed and appears:

.custom-icon:before {
	content: \"\";
	width: 20px;
	height: 15px;
	display: inline-block;
	background: url(\'http://ortizbotellaabogados.es/eng/wp-content/uploads/sites/6/2016/03/Spain.png\') no-repeat;
	background-size: 18px 18px;
}

As you see, it has change the content line with two \ and the url with a | before and other at the end.
Provisionally, I have placed the flag as part of the menu, but I want it to appear next to the Linkedin icon.
The link is: http://ortizbotellaabogados.es/eng/
Thank you (and I apologize if my English is not quite correct).