Social Icons on Footer Block not shown

[myuption]

I added one slot in the footer area and want to add social icons with text below on it, I created my content with cornerstone and then tried to copy and paste the html code in an Custom HTML block, however, the footer only shows the text, without the icons.

Then I tested the cornerstone raw code, and now it shows nothing. What went wrong?

Cornerstone

What I want to achieve

Now, I thought about using a block for this, but I cannot find a way to link the social media icon and text, is it possible?

Thanks

[rad]

Hi @myuption,

Thanks for reaching out.

May I know where do you copy the code? Possibly, the icons will only work from their original source due to loaded icon libraries that aren’t present to your site. Please note that each theme could have their own set of icon libraries and icons aren’t universal for all sites. Each icon could have represented by icon codes too, currently, our theme uses Font Awesome library. If it’s a 3rd party code then I’m afraid you’ll need the author help to integrate the icon library that they are using.

But you may provide a sample URL where these icons are, maybe I could check what’s really happening. As for linking, I recommend using button element, then just enable its graphic to show the icon, then disable the primary text to remove the text. Then lastly, add the link to the button and remove its border, shadow, or any setting that makes it appear as a button. Please check this https://theme.co/apex/forum/t/elements-button/10210

Thanks!

[myuption]

Oh, well, I copied the html code from the page source code. I used to do this all the time, but now it does not seem to work. I am using Ethos.

As suggested, I created a classic button with an icon, Now I am struggling a bit with the colors, so far I was able to make the icon bigger, apply a color and put a transparent background, I tried creating a class [ft-btn] and work with it.

    .ft-btn .x-btn [class*="x-icon-"] {
    font-size: 1.8em;
}
.ft-btn .x-btn, .button, [type="submit"] {

    color: rgb(99,99,99);
    border-color: transparent;
    background-color: transparent;
    padding: 0.042em 1.105em 0.102em;

}
.ft-btn .x-btn.x-btn-transparent:hover {
  color: #000;
  border-color: transparent;
  background-color: transparent;
}

So far it seems to work, but I was struggling to put the hover color, it was using the default white color on the site buttons.

Thanks

[myuption]

Now, when I apply my CSS inside the block, it is works correctly, once I import the block to a page, the custom class is not applied, I tried adding my CSS in the theme editor, and it is the same, then I put a custom.css file and linked to it and it did not work.

EDIT

After a while I put the class name again in the global block in the page, now the css was used and worked.

Thanks again XD

[paul.r]

You’re welcome!