Thanks!

– Charlie

Thanks for posting in.

Nope, not all yet, X still uses 4.0.3 Version.

But, can be overridden by adding this code at your child theme’s functions.php

add_action('wp_head', function(){ echo '<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" >'; }, 99999 );

Cheers!

Your forum/knowledge base isn’t pulling up any results when I look for information on Font Awesome at all. Only reason I found even this much was because I asked about it a long time ago and it’s still in “my topics”.

Basically… how can I use font awesome icons? It isn’t working when I try. Thanks.

I know you’ll ask me for the URL and all that jazz, but this is for a client site, which has verified their purchase on their site, which I’ll include the URL for in a private reply

The same idea applies since our latest bundled font-awesome is still using 4.2.0 while the cheatsheets keeps updated. And it’s now on 4.3.0 version.

You can always use existing icons provided for the theme. And it’s something like, [icon type="adjust"] or simply <i class="x-icon x-icon-adjust"></i>.

So if you wish to use icon that aren’t present from X’s default css, then you will have to create your own. ( optionally, follow the previous code for embedded the latest, but this time using 4.3.0 )

Add this at child theme’s style.css

//redefine font, add this once
.x-icon {
font-family : 'fontawesome', FontAwesome;
}

//your custom fonts and you can create as many as you want.
.x-icon-my_custom:before {
content:"\f17a";
}

Then just do it like this <i class="x-icon x-icon-my_custom"></i> or [icon type="my_custom"]

Hope this helps 🙂

<i class="x-icon fa-arrow-circle-up"></i>
Or would it be closer to this, using x-icon along with the fa bit as well?
<i class="x-icon x-icon-fa-arrow-circle-up"></i>

Basically, I need a way for the client to see icons on that cheatsheet, and implement them on a page when he wants them as headings, or perhaps as bullet points (as he’s mentioned doing). It says X supports font awesome, but I cannot understand “how” it supports it, when entering the standard<i class=””></i> doesn’t work ever…

Thanks for your time

I did some testing and this is the simplest way to do it.

In your child theme, edit your functions.php and add the following code:

add_action('wp_head', function(){ echo '<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" >'; }, 99999 );

Once you have that, try adding <i class=”fa fa-arrow-circle-up”></i> or <i class=”fa fa-bed”></i> and see if it works for you.

Hope this may help you

If I add:

add_action(‘wp_head’, function(){ echo ‘<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet” >’; }, 99999 );

To functions.php, then it DOES work but it loads font-awesome TWICE. Any ideas on how to get this to work without the extra http request?

Thanks!

Thanks for updating! If the Font Awesome 4.3.0 is loading loading properly then the icon should display and you don’t need to add it again. Would you please share your URL and login credentials in a private reply so that we can check the settings?

Thanks

font-awesome.min.css
fontawesome-webfont.woff2?v=4.3.0

Adding add_action(‘wp_head’, function(){ echo ‘<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet” >’; }, 99999 ); pulls in the style sheet (.css) file above thus making it work. Without the line above, the css file is not loaded so the icon does not show up.

Thanks and sorry for the mix up.

Vic