Login

Forum Support

Shape 5
April 20, 2021, 04:35:19 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Shape 5 > Joomla Templates > Hexa Corp - Club > Topic: Ion-Icons on Services Page
Pages: [1]
« previous next »
  Print  
Author Topic: Ion-Icons on Services Page  (Read 821 times)
danab
Jr. Member
**
Offline Offline

Posts: 49
« on: June 06, 2018, 06:52:40 AM »
Good day,

Please advice on how i can change the Ion-Icons using the following website (www.ionicons.com)

When i click for example on the settings icon it gives me the following code to use: "<ion-icon name="settings"></ion-icon>"

In the services page the code for the ion-icons looks something like this:

"<h3>System Integration</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>
</div>"

As per my understanding I need to change the following line:

"<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>"

I have inserted the code as follows:

"<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>"

But now no icon is displayed its just a blue circle.

Please help what the code should look like.

Kind regards,
Daniel Booysen
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: June 07, 2018, 05:29:14 AM »
Hello,

Please don't double post your questions, I already gave you instructions here:

https://www.shape5.com/component/option,com_smf/Itemid,75/topic,48161.0/

You should be doing nothing but swapping out the class name, no other code should be changed:

This:

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

Becomes:

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

There are no other changes to make. I have also tested this on a local install and it works with no issues. Again, if you've altered the code in any other way you need to put it back to the original:

http://www.shape5.com/demo/hexa_corp/index.php/pages/our-services
Logged
Mike Knott
------------
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
danab
Jr. Member
**
Offline Offline

Posts: 49
« Reply #2 on: June 07, 2018, 07:19:09 AM »
Sorry i didint mean to double post.

I have tried exactly as you said:

<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>

But the settings icon doesnt appear, in fact i have tried a different icon like rose but now there is no icon (bare in mind i am not an HTML expert this is why i post here)

My Code is as this:

<h3>System Integration</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>
</div>
<h3>Radio Network Rollout</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-rose icon_element"></span></div>
</div>
<h3>Managed Services</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="http://localhost/telesensenew/index.php?option=com_content&amp;view=article&amp;id=264" class="btn">Read More[/url]</p>
</div>
</div>
</div>
<div class="services_outer_wrap" style="float: left;">
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-rose icon_element"></span></div>
</div>

Please see screenshot
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: June 08, 2018, 06:06:33 AM »
Hello,

I am looking at your screenshot and you already have the settings icon set for the first two icons. If it's not showing for the third then the class name is either wrong or you have changed other code.

Please remove all of your existing code and replace it with the code in the attached file. It is the original code and I have swapped out the ion icon call on the very first icon. Again, all that is done is the class name changes and nothing else. I have tested this code locally and it works with no issues.
Logged
Mike Knott
------------
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
danab
Jr. Member
**
Offline Offline

Posts: 49
« Reply #4 on: June 09, 2018, 04:53:38 PM »
<div class="pages_highlight_box">
<h3>See What We Have To Offer</h3>

 Fusce ac eleifend erat, cursus pretium ante. Mauris euismod luctus libero ac rutrum. Morbi ullamcorper, mauris et dapibus accumsan, turpis massa ornare metus, eget commodo neque lacus sit amet erat. Vestibulum tempus, mi eget condimentum cursus, augue urna congue justo, a accumsan nunc erat eget leo. Proin sollicitudin tortor et nibh fringilla hendrerit. Praesent vel ante suscipit nisl hendrerit eleifend. Praesent a aliquet purus.

<p class="readmore"><a href="#" class="btn">Contact Us Today[/url]</p>
</div>



<div class="services_outer_wrap" style="float: left;">
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>
</div>
<h3>Creative Services</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-cafe icon_element"></span></div>
</div>
<h3>Website Development</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-aperture icon_element"></span></div>
</div>
<h3>Consultant Work</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
</div>
<div class="services_outer_wrap" style="float: left;">
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-person-stalker icon_element"></span></div>
</div>
<h3>Social Networks</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-camera icon_element"></span></div>
</div>
<h3>Photo Services</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover"><a class="ion-link icon_element">[/url]</div>
<div class="icon_non_hover"><span class="ion-upload icon_element"></span></div>
</div>
<h3>Cloud Options</h3>
Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, eleifend ornare libero.

<p class="readmore"><a href="#" class="btn">Read More[/url]</p>
</div>
</div>
</div>
<div style="clear: both;"></div>




I added my code in bold "cafe" ... still i dont see then correct "settings" icon presented in your code.

Any idea what might be wrong?

BR,
Daniel Booysen
Logged
danab
Jr. Member
**
Offline Offline

Posts: 49
« Reply #5 on: June 11, 2018, 06:45:49 AM »
Hi Mike,

I think best thing to do here is to get the website online so that you can access it and change "check" the code used.

I am finishing up the website and will let you know once it is online and give you the login details in a PM.

I'll be in touch and thanks for your support thus far!

Kind regards,
Daniel Booysen
Logged
Pages: [1]
  Print  
Shape 5 > Joomla Templates > Hexa Corp - Club > Topic: Ion-Icons on Services Page
 « previous next »
 
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.