Forum Support

 
Advanced Search


[1]

Offline danab
Free Member
Posts: 49
Posted on: June 02, 2018, 01:15:24 AM

Good day,

I am using the services page that came with the website site shaper. I like the feel and flow of it. However i want to change some of the things. (note, i am not a coder so i know changing the things in code might be a struggle for me but help you can assist, also my site is being developed offline first)

I have attached a screen shot of the (bubbles) circles on the page. One is an airplane the other a globe some are people etc. What i want to do is instead of displaying a blue circle with a random element (at least by reading the code it seems like its using an element):

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

So instead of displaying the blue circle with the element or image i want to replace that with an image that has exactly the same size as the circle and should also be a circle (i can create this using photoshop), but i have no idea on how to edit the code to use my image rather than the element.

Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: June 04, 2018, 07:12:09 AM

Hello,

That code is designed to use ion icons by changing out the class name "ion-earth" from one found here:

https://ionicons.com/

If you want to modify those areas and replace them with pictures that would require custom programming. We do not provide modification services as part of our support. Our support is for the core code.
Logged

Offline danab
Free Member
Posts: 49
Posted on: June 05, 2018, 12:04:43 AM

Thanks Mike
Logged

Offline danab
Free Member
Posts: 49
Posted on: June 05, 2018, 04:02:23 AM

Hi Mike,

I am having trouble with adding icons using ionicons.com.

The original code will look something like this:

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

I replaced the above mentioned code with:

"<ion-icon name="settings"></ion-icon>"

Which results in the icon to disappear and the code <ion-icon name="settings"></ion-icon> is written in the blue bubble icon.

I have also tried editing the code as follow:

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

Which doesnt change the icon it self it just remains the same. I have tried clearing my cache without any luck

This is the code i got from the website: "<ion-icon name="settings"></ion-icon>"

Can you assist me with how the code should look like? Like is said this website is on localhost but connected to the internet so i cant give you access yet. Unless you want to log into my computer remotely?

Kind regards,
Daniel Booysen
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: June 05, 2018, 07:14:28 AM

Hello,

Please post the code back to the original code found here:

http://www.shape5.com/demo/hexa_corp/index.php/pages/our-services

I am not sure why you made this change:

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

I replaced the above mentioned code with:

"<ion-icon name="settings"></ion-icon>"

That's not proper html. The only part you should be changing is the class name "ion-aperture" to match whatever icon you want to use. So in this case your code would look like this:

<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>
Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.022 seconds with 20 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
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.