Forum Support

Shape 5
March 28, 2024, 07:11:54 PM *
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 do you change the icons in the icon boxes?  (Read 408 times)
springer1
Jr. Member
**
Offline Offline

Posts: 1



« on: October 20, 2015, 12:40:07 PM »

Can someone please help me understand where I can change the icons?
When I open the Icon Box modules it does not refer to the ico.

Please help and thank you
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: October 20, 2015, 07:34:16 PM »

Hello,

You just need to change the icon class names with a different one from the ion-icons icon set.

Code:
<div id="icon_boxes">
<div id="icon_box1" class="icon_box">
<div class="icon_box_inner">
<a href="index.php/features-mainmenu-47/template-specific-features">
<span class="ion-ribbon-b icon_box_icon"></span>
<h3>Award Winning Customer Satisfaction</h3>
<span class="icon_box_subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a massa sapien. Praesent non sem vitae tortor ornare dictum id sed eros morbi vehicula</span>
</a>
<div style="clear:both;"></div>
</div>
</div>
<div id="icon_box2" class="icon_box">
<div class="icon_box_inner">
<a href="index.php/features-mainmenu-47/template-specific-features">
<span class="ion-heart icon_box_icon"></span>
<h3>We Put Our Heart And Soul Into All We Do</h3>
<span class="icon_box_subtext">Sed a massa sapien. Praesent non sem vitae tortor ornare dictum id sed eros morbi vehicula Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</a>
<div style="clear:both;"></div>
</div>
</div>
<div id="icon_box3" class="icon_box">
<div class="icon_box_inner">
<a href="index.php/features-mainmenu-47/template-specific-features">
<span class="ion-cloud icon_box_icon"></span>
<h3>The Comfort We Offer Has No Limits</h3>
<span class="icon_box_subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a massa sapien. Praesent non sem vitae tortor ornare dictum id sed eros morbi vehicula</span>
</a>
<div style="clear:both;"></div>
</div>
</div>
<div style="clear:both;"></div>
</div>

So for example if you didn't like the ribbon you would swap out:

Code:
<span class="ion-ribbon-b icon_box_icon"></span>

With another class from:

http://ionicons.com/

Regards,
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.