[CharliePryorParticipant]

So, with Font Awesome now involved and all… does this mean that all of these work out of the box now?
http://fortawesome.github.io/Font-Awesome/cheatsheet/

Thanks!

– Charlie

[RadModerator]

Hi 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!

[CharliePryorParticipant]

Is this still relevant in using Font Awesome in this theme? If I want to use icons on pages built with visual composer, can I use Font Awesome in regular text elements like I normally would anything else?

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

[CharliePryorParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

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 🙂

[CharliePryorParticipant]

So, just to verify, the my_custom part of this, is actually the font awesome code correct? For example, “fa arrow circle up” is one of many icons there. If I wanted this, I would write it as follows?

<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

[Rue NelModerator]

Hey Charlie,

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

[Victor DParticipant]

Hello, With X 4.0.5, I can see in Chrome’s network tab that Font Awesome 4.3.0 is loading. However, using for instance <i class=”fa fa-facebook”></i> does not work.

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!

[RupokMember]

Hi @vdiaz-2

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

[Victor DParticipant]

Currently the site is in development locally. However, inspecting things a bit closer I noticed that font-awesome is not loading twice, but rather the fonts are being loaded and the style sheet is being loaded.

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

[DarshanaModerator]

Glad you were able to figure it out 🙂

[Author]

Posts