Icons not showing and link not working

[Cutts]

I have an old site where I used an icon within a circle to give a link to another page on the site. I created this using a Classic Text element with a small bit of html in the text location and some info in the Style location as follows:

!!! sorry - do not know how to post the html !!!

and

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

This works fine on the old site but on the new site the icons are missing and the link does not work. I have cleared my cache and used various browsers but this makes no difference

Any help would be appreciated.

Jim

[rad]

Hi @Cutts,

Thanks for reaching out.

You can place your HTML code within the block of

```
Your HTML CODE HERE
```

But I like to check the issue directly, would you mind providing the exact URL where this issue is? Plus, your site is behind a coming soon page, please provide your login credentials in a secure note as well. You can create a secure note by clicking the button with the KEY icon under your existing post.

Thanks!

[rad]

Hi @Cutts,

You have updated your cornerstone but not the theme, hence, the styling doesn’t match. Please update your theme too to match the icons and new features.

And if that doesn’t work, then please add this CSS to your global custom CSS.

[data-x-icon]:before, [class*="x-icon-"]:before {
    content: attr(data-x-icon-s) !important;
} 

Thanks!

[ruenel]

Hello There,

I went ahead and updated your X Theme to version 6.2.5. Your icons are displaying now.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Cutts]

Thanks all,

Everything looking great. Thanks for your help but may I beg a little extra help?

I would like the encapsulating circle around the icon to disappear (or become the same color as the background) whenever you hover over the associated icon. Any ideas how to achieve this? Cheers.

Best regards,

Jim

[jade]

Hi Jim,

For the setup to me more manageable, try adding a class to all of those text element you will place in a circle then add this to the Global CSS:

.circle {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 4px solid;
    font-size: 2.5em;
    line-height: 2.75em;
    text-align: center;
    color: #ffffff;
    border-radius: 100em;
}

.circle:hover {
    border-color: transparent;
}

The code above assumes that the class you will add to the text element is circle.

Hope this helps.

[Cutts]

Thanks Jade and all at support.

Very much appreciated.

Best regards,

Jim

[jade]

You’re most welcome, Jim.