Add icon into custom CCS button

[mawbrayParticipant]

Hi there,

Really enjoying the theme. You can see it in action at Fiery Flavors. I’ve run into one thing that I can’t solve. I’d like to have an icon from the icon set inside of a custom ccs button. So essentially looking for:

{-ICON-CALL TO ACTION}

Trying to do this to add the link-2 icon prior to a link that will take you to a sister site. A visual cue that it’s an external link. Is this possible?

I’ve tried placing it in just with class= code (and with div=) right after the <a>. I also tried placing “class=” code right before the button text. Neither worked as I was hoping. Can the css be embedded in each other?

If it’s not possible, no worries – will look into another way to visually communicate “external link”.

• This topic was modified 11 years, 2 months ago by  mawbray.
• This topic was modified 11 years, 2 months ago by  mawbray.
• This topic was modified 11 years, 2 months ago by  mawbray.
• This topic was modified 11 years, 2 months ago by  mawbray.

[ThomasKeymaster]

First of all, I apologize for the delayed response and thank you so much for the kind words about Criss Cross.

If you are still looking for a solution to this, try the HTML code below:

<a class="ccs-button color-green" title="Button Link" href="#">Button Link <i class="icon-share-2"></i></a>

The code above will create a green button with your text and an icon (from the Criss Cross icon font page) displayed after the text.

Unfortunately, after looking through the icons, I am not sure if there is an “external link” icon included. You may need to use the same instructions but target the icon from an external plugin or stylesheet. Otherwise you are free to use any of the icon classes included with Criss Cross.

Hope this helps.

[Author]

Posts