Icon location

[Cutts]

Hi Support,

I have used Cornerstone Custom Icons to make a “hovercraft” icon and have inserted into my page without any issues. This icon is to match size, location and position of two other standard icons, all in their own column in a single section. The problem is that the new icon is much lower in its circular graphic than the rest.

I have the following html and class detail:

<a href="www.rockledgemarineservices.com/hovercraft"><div class="x-icon-hover"></div></a> 

display: inline-block; width: 3em; height: 3em; border: 4px solid; font-size: 2.5em; line-height: 2.75em; text-align: center; color: #02AED7; border-radius: 100em;

Any ideas?

Best regards,

Jim

[paul.r]

Hi Jim,

To align it, you can add margin-top to your custom font x-icon-hover

eg.

.x-icon-hover {
    background:url(http://www.rockledgemarineservices.com/wp-content/uploads/2018/08/hcraft-finish-final-blue-small.bmp) top center no-repeat;
    width:50px;
    height:50px;
    margin-top:35px;
} 

Hope that helps

[Cutts]

Cooool!

Thanks Paul.

I have another quick question that you may be able to help with.

I have been reading that if I use custom CSS, then when the theme gets updated I may have problems and that I should have used a child theme.

Is it possible to simply export or save my entire work do far as a child theme? Do not fancy recreating all the work again.

Thanks in advance,

Best regards,

Jim

[friech]

Hi Jim.

Don’t worry, since you use a custom Class (x-icon-hover) is should not conflict to other icon class in the theme.

You can add the custom CSS given to Theme Options > CSS and it should be safe in there.

You need a child theme if your customization involves custom functions, and customizing the theme templates.

How To Setup Child Themes
Why use a Child Theme?

Hope it helps,
Cheers!

[Cutts]

Thanks all,

That is a bit of a load off.

Best regards,

Jim

[rad]

You’re most welcome!