Forum Support

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

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

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

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.

<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

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