How to add latest FontAwesome to ENFOLD? - Support | Kriesi.at

Tagged: font awesome, fontawesome, icons

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
February 11, 2018 at 11:36 pm #910818
BeeCee
Participant
Hi,

I’m a bit overwhelmed by these settings and possibilities:
https://fontawesome.com/get-started

What is the best and easiest way to add FontAwesome to ENFOLD?
And is it possible to get “automatically” always the latest version of FontAwesome?

I found an old forum post here:

https://kriesi.at/support/topic/font-awesome-4-2-0-with-enfold-not-working/#post-324419

but when I replace the version number in this code snippet to:
```
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/5.0.6/css/font-awesome.min.css' );
}
```
then it does not show the icon (https://fontawesome.com/icons/file-alt?style=solid), that I would like to use in a main menu item:

<i class="fas fa-file-alt"></i> Stichwortverzeichnis

==> https://i.imgur.com/DlEegni.jpg

It simply shows NO icon at all.
Is perhaps this code snippet from above outdated?
How else can I add the latest FontAwesome to ENFOLD please?

Thanks.
February 12, 2018 at 1:14 pm #911087
Ismael
Moderator
Hey Chris,

Thank you for using Enfold.

According to the “get started” page, you need to load the js file.
```
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
```
Use the wp head hook or the wp_enqueue_script function.

// https://developer.wordpress.org/reference/functions/wp_enqueue_script/

After that, you can add the icons by using the appropriate markup.
```
<i class="fas fa-user"></i>
  <i class="far fa-user"></i>
```
Best regards,
Ismael
February 12, 2018 at 5:19 pm #911204
BeeCee
Participant
Thank you. As I’m no coder, so please could tell me the right way to use it? I found in this forum two different ways of adding it, some from very old posts here. So what way is besser and not so … “outdated”?

(1)
```
function avia_add_fontawesome(){
?>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<?php
}
add_action('wp_head', 'avia_add_fontawesome');
```
or (2)
```
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.0.6/js/all.js' );
}
```
February 12, 2018 at 5:23 pm #911210

Jordan Shannon
Inactive Moderator

Hi,

They will both help you meet the same goal. Method 1 should work just fine.

Best regards,
Jordan Shannon

September 18, 2018 at 4:22 pm #1011374
steviger
Participant
Hi,

I’ve have a similar issue. In my functions.php I have:
```
function avia_add_fontawesome(){
?>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<?php
}
add_action('wp_head', 'avia_add_fontawesome');
```
In my custom CSS:
a.frontpagelink:after { text-align: center;
content: “\f105″;
font-family: FontAwesome!important;
font-size: 18px;
color: #ffffff;
margin-left:12px;
display: inline-block;
}`
And in my code: <a class=”frontpagelink” etc.
For some reason the required Font Awesome “angle-right” doesn’t show up. (see screendump)

What is going wrong here?

Best regards,

Steven
September 18, 2018 at 5:34 pm #1011419

Victoria
Inactive Moderator

Hi steviger,

Could you please give us a link to your website, we need more context to be able to help you.

Best regards,
Victoria

September 18, 2018 at 6:14 pm #1011441

steviger
Participant

Hi Victoria,

Good point. Might be handy ;)

Regards,

Steven

September 18, 2018 at 9:35 pm #1011518

BeeCee
Participant

@steviger
the current version of FontAwesome is version 5.3.1

September 19, 2018 at 12:08 am #1011569
Mike
Moderator
Hi,
I found that you must add the font-weight with Font Awesome 5 Free.
First add this code to the end of your functions.php file in Appearance > Editor:
```
		function Font_Awesome_5(){
			?>
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
			<?php
			}
			add_action('wp_head', 'Font_Awesome_5');
```
Then format your css like this:
```
a.frontpagelink:after {
    text-align: center;
    content: "\f105"; 
    font-family: "Font Awesome 5 Free"; 
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    margin-left: 12px;
    display: inline-block;
}
```
Best regards,
Mike
September 19, 2018 at 10:38 am #1011714

steviger
Participant

Hi Mike,

Thanks for your suggestion. However, when using your functions / CSS code, I still don’t see the FA font.

Best regards,

Steven

September 19, 2018 at 12:46 pm #1011790
Mike
Moderator
Hi,
@steviger I see that for your one button “a.frontpagelink:after” the font is showing, but all others you are using the wrong font-family.
Please make sure you are using this:
```
 your-class {
    content: "\f105"; 
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    color: #fff;
    display: inline-block;
}
```
please also use the font-weight

this one is right:

Best regards,
Mike
September 19, 2018 at 3:35 pm #1011856

steviger
Participant

Hi Mike,

I must admit that your code does work, thanks a lot! For testing purposes I only used that one class and thought that I really cleared my browser’ cache. Apparently I didn’t…..

Thanks for the support and best regards,

Steven

September 19, 2018 at 4:31 pm #1011907

Victoria
Inactive Moderator

Hi Steven,

Glad we could help :)

If you need further assistance please let us know.
Best regards,
Victoria

December 12, 2019 at 7:01 pm #1165289

Dani
Participant

Hello Enfold,

happily using your theme. I have a question about activating Font Awesome. I have included the following code in functions.php (as font awesome explains on getting started page) but the font is not showing on the masonry portfolio excerpt when placed on the image itself. It does work when excerpt is used in blog posts element. Could you help me to see if I should use something like specific CSS?

function avia_add_fontawesome(){
?>
<script src=”https://use.fontawesome.com/3a1adf5101.js”></script>
<?php
}

function Font_Awesome_5(){
?>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.3.1/css/all.css” integrity=”sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU” crossorigin=”anonymous”>
<?php
}
add_action(‘wp_head’, ‘Font_Awesome_5’);

December 13, 2019 at 12:15 pm #1165487

Mike
Moderator

Hi,

@Dani
Thanks for the links, so on your homepage in the masonry portfolio I’m not seeing the Font Awesome code where you want the icons to show: <i class="fas fa-ruler-horizontal"> did you add this?
I would ask for a admin login to check, but as this is not your thread your details will not be private.
I recommend opening a new thread with this is the Private Content area.

Best regards,
Mike

June 1, 2021 at 8:44 am #1303356

Nad
Participant

A plugin seems easier to use

Font Awesome

June 1, 2021 at 1:10 pm #1303408

Mike
Moderator

Hi,
Thank you @Nad, it probably would be these days, but I don’t recall if this was an option back in 2018 when this thread was started, but thanks again for pointing this out.

Best regards,
Mike
Author

Posts