Hi guys
The Ion Icon integration is a great feature, and I understand how to replace icons that you have set up on the template.
However I'd like to make full use of this feature by being able to place icons where I please, but I can't seem to get it right.
My understanding is that Ion Icons basically uses a font to display icons, and can therefore be scaled and styled etc as CSS.
So if on this template I need to add some social icons, say, 4 in a row, to a custom HTML module, that change color on hover, how would I do that? I have been able to find no instructions for this anywhere. If it works like a font, then can't I do something like the following?:
In the custom HTML:
<div class="social-wrap">
<a href="http://www.facebook.com" target="_blank"><div class="social-facebook"></div></a>
<a href="http://www.pinterest.com" target="_blank"><div class="social-pinterest"></div></a>
<a href="http://www.instagram.com" target="_blank"><div class="social-instagram"></div></a>
<a href="http://www.twitter.com" target="_blank"><div class="social-twitter"></div></a>
</div>
And then in the custom.css file:
.social-facebook {
content: "\f272";
font-family: "Ionicons";
color: #FFFFFF;
font-size: 2em;
width: 25%;
height: 130px;
position: relative;
float: left;}
.social-facebook:hover {
color:#999999;
}
....repeat for the other 3 social divs.
This doesn't display anything though. Please tell me what I am missing, as I would love to understand how to use this icon feature properly.
Thanks again.