Issue Using Font Awesome SVG Framework

Support
#1

I purchased Font Awesome 5 since the included icons did not include most of what I needed. I followed their instructions for installing via the SVG Framework method:

  1. Grab the base Font Awesome loader at /js/fontawesome.js.
  2. Grab one or more of the styles (ex: /js/packs/solid.js) in the /js/packs directory.
  3. Place these files in your project static files.
  4. Include them in the of your document.
  5. Reference Font Awesome icons (using the inventory for easy copying/pasting) in the of your document.

Step 4 is where, I am stuck. I tried adding:
`

`

to the content JS pullout for the page I am working on and then

<body>
  <i class="fa fa-user"></i>
</body>

to a content box and text box.

I have tried without the ‘<script…’ and just put ‘defer src="/js/packs/solid.js"’ in the content js section
and omitted the body tags as well. Nothing gets the icons to show.

Is this the incorrect way to insert in the the of my document that’s referred to in step 4? should this be added to something like _header.php ? If so, what’s the proper format?

#2

Hi there,

Thanks for writing around! You can add the above scripts in your header by adding the following code in your child theme’s functions.php file:

add_action('wp_head','font_awesome_scripts');
function font_awesome_scripts() { 
?>
	<script defer src="/js/packs/solid.js"></script>
	<script defer src="/js/fontawesome.js"></script>
<?php 
}

Let us know how this goes!

1 Like
Defer loading of fonts
#3

I added it to functions and it doesn’t work. in the console it says:

Failed to load resource: the server responded with a status of 404 (Not Found) … (see secure note)

I put the actual .js files in the public_html/dev/wp-admin/js directory via the file manager. does this mean I need to change the “/js/packs/solid.js” in the code you linked to something else?

#4

Hi again,

It means the path you’ve provided is wrong, it’s not able to find the files in the specified folder. Change the paths to full path, before doing to make sure the path is correct by pasting the URL in the browser and you should see the JS file in the browser.

Hope this helps!

#5

Yes, I got it to work, thanks for the reply

#6

You’re welcome! :slight_smile:

#7

I’m considering getting Font Awesome 5.

@AlexSextant - how do you like it? Would you recommend it?

@paul.r - any plans to include Font Awesome 5 in Pro / X?

#8

Hi @aleminopuy,

Thanks for writing around! We can’t give you an ETA yet but your requested has been noted down.

Thanks!

#9

Does that mean “yes Font Awesome 5 will be added, but I can’t give you a date for when it will be added,” or “neat idea, we’ll think about it and maybe Font Awesome 5 will be added” ?

#10

Hi again,

We’ve replied you here https://theme.co/apex/forum/t/font-awesome-5/15218/2

Cheers!

#11

It’s great, I got it to work. The documentation isn’t great if you’re new to all this, but a little trial and error with layering and i’ve gotten it to look exactly how I want.

#12

Glad to know it worked. Have a nice day! :slight_smile:

#13

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