Alternative Way to Print an Icon w/o Shortcode?

Support
#1

We’re using a tables plugin called Ninja Tables. We’re using conditional logic with it so if a cell contains x, change the cell content to y. The “y” is a Font Awesome icon via shortcode. The problem is - from what the dev says - that because it’s conditional logic, it can’t execute the shortcode until after the fact (once it sees the cell contains x), when it’s too late. Thus, it cannot display the icon via shortcode.

Is there some other way to display an icon with Pro w/o using a shortcode…or do you know of some plugin or tool that converts shortcodes to something that isn’t a shortcode? Just grasping at straws here trying to make this work. Thanks!

#2

Hi @co50,

Instead of using the shortcode, please try to change the value of Y to an actual html codes the shortcode is producing. Note that this is an idea, please consult your developer for the actual execution.

Hope this helps.

#3

Where can I find the HTML codes for Font Awesome icons?

“please consult your developer”. I am the developer. If I had some dude I could just ask, why would I post a question here? LOL!

#4

Hi @co50,

Here’s some sample html codes displaying the Font Awesome icons.

<i class="x-icon x-icon-lock" aria-hidden="true" data-x-icon="&#xf023;"></i>
<i class="x-icon x-icon-truck" aria-hidden="true" data-x-icon="&#xf0d1;"></i>
<i class="x-icon x-dice-one" aria-hidden="true" data-x-icon="&#xf525;"></i>

You can find the icon codes in here https://fontawesome.com/cheatsheet. Don’t forget to add a prefix x- for the class and &#x for the data-x-icon.

Hope it helps.

1 Like
#5

Awesome. Exactly what I needed. Thanks!

#6

You’re always welcome @co50!

Cheers.

#7

Hey there again - wondering why this doesn’t seem to work with any of the FontAwesome brand icons? We’ve tried out, for example, every Facebook icon variation and it shows as that thin square invalid character icon. Non-brands work, but brands do not - and these are not Pro icons, just regular FontAwesome icons. What am I missing?

For reference:

<i class="x-icon x-icon-facebook" aria-hidden="true" data-x-icon="&#xf09a;"></i>

#8

Hello @co50,

As of Font Awesome version 5, they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

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

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

You must update your code and use this:

 <i class="x-icon x-icon-facebook" aria-hidden="true" data-x-icon-b="&#xf09a;"></i>

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

1 Like
#9

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