[xthemerParticipant]

Hey there,

I would like to create a custom class for text links whereby an x_icon (let’s say x_icon type=”angle-right”) appears before the link-tag content, essentially like in cornerstone’s icon list.

For example:

> This is a text link
> This is another text link

What would be the CSS and HTML markup to get the icon inserted in there?

Thanks a bunch.

[RahulModerator]

Hi There,

https://community.theme.co/kb/customizer-custom/ – This will help you in customizing CSS

and for Design you can use cornerstone. https://community.theme.co/kb/cornerstone-introduction/

Feel free to ask if you have more questions.

Happy to help!

Cheers!!

[xthemerParticipant]

Sorry, but this does not answer my question at all.

I’m fine on creating a custom link class and inserting content before or after using css, e.g.:

a.custom:before {
display: inline-block;
padding-right:3px;
content: “\00bb”;
}

My question: What’s the coding to get specifically an x_icon showing as the content before in a text link.

Thanks

[LelyModerator]

Hello There,

Can you give us the link where you implement this? We like to see your setup. Although, we can always use the icon element or icon shortcode like this:
[x_icon type="angle-right"]<a href="#">This is a text link</a>
See this:http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps.

[xthemerParticipant]

This reply has been marked as private.

[RupokMember]

Hi Julian,

Thanks for writing back. Your approach is good as well so you can go with that. If you are looking for the icons UNICODE values then you can get from here – http://fontawesome.io/icons/

Open any icon and you will find the UNICODE value – http://prntscr.com/ck961y

You can use the UNICODE like as you mentioned above :

a.custom:before {
  content: "\f101";
}

Hope this makes sense.

[xthemerParticipant]

Yes, your suggestion does make sense. And I actually did try this already based on some info I found in the forum.

But I just get a box displayed, and not the icon.

Please let me know what I’m missing here. Thanks.

[NicoModerator]

Hi There,

Probably because of folder permissions and site security setup.

Would you mind checking the thread below.

White rectangles showing up instead of icons on all pages/visual composer

Hope it helps.

Let us know it goes.

Thanks.

[xthemerParticipant]

Nico, according to my tools I’m not experiencing permission errors like in the thread you referenced.

In general, the icons will display correctly on my site when using shortcode. They are not displayed, however, when the unicode value is used as suggested above.

What else can I try?

Thanks

[RupokMember]

Hi there,

Sorry for the confusion. You need to use the CSS within your Child Theme’s style.css because UNICODE in pseudo content will be stripped from the Customizer.

Cheers!

[xthemerParticipant]

Rupok, the latest suggestion did not work either.

This seems to be a pretty basic css thing that I need to accomplish, i.e. a :before element that displays a unicode character, be it a font awesome icon or something else.

I have not had any issues of the kind on a previous site that I made in the past using a different framework.

How can I get the job done in x theme?

Thanks for your help

[Paul RModerator]

Hi,

You can try this code instead.

body a.custom:before {
   font-family:fontawesome;
   content: "\f101";
}

Please add it in your child theme’s style.css

Hope that helps.

[xthemerParticipant]

Thanks! Adding the body selector did the trick.

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts