Link with overlay and icon + new FA icons html code

Support
#1

We want to create a hover with overlay on the column/blocks, with a FA icons and with a href link on it so you can click. How do I manage to do this?

Please show for both elements in the print screen how we can archive this. I manage to add the link but not on the overlay. The overlay blocks the user from link on the link

How do we display the new FA icons that isn’t regular and free version. We have latest version of PRO which includes the premium FA icons with other light versions.

Copy the html code from the cheat sheet does not work:
https://fontawesome.com/icons/play?style=light
https://fontawesome.com/icons/angry?style=light
https://fontawesome.com/icons/bolt?style=light

Do you have an updated cheat sheet for all new FA icons working with the theme?

Also wonder how I can manage to do two columns in the box. Tried in the text element V2 but does not work good. Try to show us to do two of the text block of the % text block and show us how to do it. Would be appreciated as well.

#2

Hey Mike,

Regretfully, you can’t display FontAwesome Pro in the builder’s Graphic interface. You will need to use its HTML code and also need to load the FontAwesome Pro CSS. For usage instructions, please see https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css. Or, contact FontAwesome Pro support.

Regarding the 2 columns in a box setup or essentially, nested columns, you will either need to use Global Blocks or use the Block Grid shortcode. The Block Grid method would be the easier option.

For your overall setup however, I’d recommend that you use The Grid or Essential Grid. The setup would be easier that way because you only need to configure the skin once then all of your items will use that skin. Using Cornerstone for that, you would need to manually create each item which would be quite laborious and you will currently might experience some lag because you have many elements in the page. Moreover, the image hover with icon will require custom development.

Here’s the link to learn how to use The Grid skin builder.

Here’s for Essential Grid

I hope you understand the current complexity of this setup.

#3

Hi,

I refer to Theme.co and the FA icons provided by you. You have integrated all frontawesome pro icons so either you did not know that or I don’t know what you talk about. You have light now which is the PRO selection of the icons please speak with your developers if you did not know.

But PRO has another way of display the icons in HTML so can you provide me with a cheat sheet for every single icon like the FA icon page has. Not only me that would like to know that so it’s time to create one. You only have a short code list with basics that is over 2 years old.

So if you did not know you released these new icons I think it’s time for you to read the change-log as well.

2columns, Ok I’m still supersede you have not started create the possibility to add blocks in block. And still heavily rely on these old short-codes.

Yes I get your point and I already started with The Grid skin builder. But I want to take advantage of the filters and sorting but have not really had time to look into it to fully understand it. But I will see how I deal with that. thanks

#4

I have issues creating sorting and filters. I add tags to the pages but I don’t manage to filter them. Any chance you can support here? And show how to create a filter that works?

#5

Hello @Incognito,

Please do not use the html code of the Font Awesome because we do not support it to avoid any conflicts. Please use our icon shortcodes instead. You may use the following:

[x_icon type="l-play"]

[x_icon type="l-angry"]

[x_icon type="l-bolt"]

You can check out the rest of the icon shortcodes here: http://demo.theme.co/integrity-1/shortcodes/icons/

And for more details how you can make use of the sort and filter in The Grid plugin, kindly check this out:
https://theme-one.com/docs/the-grid/#filter_settings

Hope this helps. Please let us know how it goes.

#6

Hey Mike,

Just adding additional info here and I’m very sorry for the confusion earlier. I missed this bit in our Changelog and also failed to see that the Regular and Light versions are Font Awesome Pro versions and thought that FA Pro includes special fonts.

We do not have a cheatsheet but to display the Light icons in a Text/HTML editor or Text element, you will need to prepend l- to the icon name like what @RueNel showed you. For regular, you prepend o-. For searching for the icons though, it’s best that you use the Font Awesome website.

All Font Awesome Icons should work but if you encounter an icon that is broken, you can report it to us.

Thanks.

#7

I’ve tried to follow that but it never filters. Not a super good documentation from them and I’ve tired :slight_smile:
And they do not have any support. I have tags and everything shows up but it never filters just says All (4) and (4) as in 4 items.

OK many thank for the answers so it should be like following:
l- for light [x_icon type="l-play"]
o- for regular [x_icon type"o-play"]
s- for solid? [x_icon type="s-play"]

Yes I agree searching in their cheat sheet but I want to know how the short-codes are converted to PRO like my table above. That just make it easy and less questions for you.

#8

For solid, you just use the default name the same as the previous version like [x_icon type="play"]. Same same applies for the Brands. You can see a demo of that in this video at https://youtu.be/BXoaWjmpllI?t=214.

If you need to use the HTML version which is commonly used to display an icon in X Menu, please see https://youtu.be/6AyXYQH4yBU

For HTML, the modifiers are:

  • data-x-icon-b for social icons.
  • data-x-icon-o for outline icons.
  • data-x-icon-s for solid icons
  • data-x-icon-l for light icons

The s modifier isn’t applicable for the shortcode version.

The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.

The Font Awesome filter is a bit glitchy now but I believe it will be improved.

I’ll be forwarding this to our Knowledge Base writer for inclusion.

Thanks.

#9

Many thanks!

OK many thank for the answers so it should be like following:
l- for light [x_icon type="l-play"]
o- for regular [x_icon type"o-play"]
for solid [x_icon type="play"]

#10

You’re welcome!
Thanks for letting us know that it has worked for you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.