Custom CSS on CTAs

[alex120ft]

I'm trying to add a CTA that has an icon after the text in https://app.hubspot.com/ctas-beta/. I would like to do this by making use of ::after{} css functionality but this doesn't seem to work when I add it into the css builder, despite the fact I can use the same css on a website and it works fine.

Is it possible to do this?

[cbarley]

Hi @alex120ft, This should certainly be possible. As you can see at the bottom of this page here: https://www.playtimepottery.net/api-test?hs_preview=QJXutdaU-6152997013, I've included a font awesome icon using an :after pseudo selector in that red CTA. Here's an image of my CSS: http://prntscr.com/l2a9lh.

You can also put the code in your stylesheet if you'd prefer. Since the CTA's page doesn't have the font awesome library loaded in, we just see a square, but see the correct icon on a live page since the Font Awesome reference has been loaded into the stylesheet I'm using on that page.

If you give me the CTA in particular that you're having trouble with, and the page you're trying to place it on I can certainly look into more detail for the specific issues you're having.

[YonMa]

Hi, I tried adding the fontAwesome code into my LP [https://info.vayyar.com/protect-your-parents-more-ever] as you wrote but it doesn't seem to pull anything from fontAwesome. I want to add an icon after the 1-800 number in the CTA in the bottom.

1. I have the free kit in the page's HTML [top]
2. I added the following code to the 'advanced' section of the CTA editor:
   1. a#cta_button_<id of the CTA>:after {
      content: "/f879";
      font-family: fontAwesome;
      }

What am I doing wrong?