Forum Support

Shape 5
March 28, 2024, 07:31:12 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to use Ion Icons from scratch  (Read 525 times)
smuir
Jr. Member
**
Offline Offline

Posts: 117



« on: 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:

Code:
<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:

Code:
.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.

Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: 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.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #2 on: 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.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: 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:

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

This can be embedded via HTML in any of the content on your site such as:
Code:
<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.

Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.