: How to use Ion Icons from scratch
: smuir January 31, 2015, 09:59:38 PM

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.

: Re: How to use Ion Icons from scratch
: mikenicoll February 02, 2015, 05:50:49 PM

Hello,

Here is our Tutorial with some coding examples:

http://www.shape5.com/demo/zoka_transports/index.php/features-mainmenu-47/continued-vertex-features/ion-icons-integrated

You can also visit the ion-icons site for more information.

: Re: How to use Ion Icons from scratch
: smuir February 09, 2015, 02:16:39 AM

Hi Mike - I'm probably at fault here...but I couldn't find any proper tutorials on the Ion Icons page. I did look at the Shape5 page about Ion Icons previously, but it doesn't seem to relate to using Ion Icons like a font with the 'content' CSS rule. Regarding the HTML and CSS code I showed you - am I completely way off? Or is there a bit of CSS missing? What is the simplest way to use Ion Icons like a font? All the examples provided focus on HTML and several layers of divs. If you could look at my code from my previous post and let me know if I am close or on another planet, that would be great.

Sorry for this post, it's probably annoying. I understand that there has been information about Ion Icons but I just don't understand how it relates to using them as you would a font, with the character being specified by the 'content' value. Thanks again.

: Re: How to use Ion Icons from scratch
: mikenicoll February 09, 2015, 10:06:05 PM

Hello,

I have no idea what your referring to here. Ion Icons need to be called with a class name such as:

<span class="ion-headphone icon_element"></span>

This can be embedded via HTML in any of the content on your site such as:

<p> These are headphone icons <span class="ion-headphone icon_element"></span> that sound really great! </p>

That is the only way the icons can be called.

Shape 5

Joomla Templates => Zoka Transports - Club => : smuir January 31, 2015, 09:59:38 PM