Font Awesome not Work

Support
#1

Hi, i’ve setted on header.php file the following code:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

Now i’ve changed the .htaccess to allow cross origin:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule !(js|ico|gif|jpg|png|css|swf|flv|libraries|maint|admin|login|logout|reg|woff) index.php [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

I’ve try to add the snipped code <i class="fas fa-home"></i> in editor page on mozilla browser with f12 and it work. But when i use this on CSS not work (i not display icon)

.x-nav>.current-menu-item::before {
content: “\f015”;
font-family: “Font Awesome 5 Free”;
left:-5px;
position:absolute;
top:0;
}

#2

Hi Stefano,

No need to add fontawesome, fontawesome is already incorporated into the theme.

You can try this code

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

instead of

<i class="fas fa-home"></i>

Thanks

#3

Ok but i want add it on CSS not on the html code. On CSS not work (i not display the icon) i have changed from \f015 to &#xf015 but not see icon

#4

#5

Hello Stefano,

Please remove the FontAwesome 5 code you have added in the header.php. It should not be needed because FontAwesome is loaded in X.

Then you can use the code:

.x-nav>.current-menu-item::before {
    content: "\f015";
    font-family: "FontAwesome";
    left: -5px;
    position: absolute;
    top: 0;
}

Hope this helps.

1 Like
#6

Lol now it work thanks

#7

You’re always welcome!

Cheers.

#8

Is normal that i not display icon correclty in the navbar? Fotawesome Icon work.

.x-nav>.current-menu-item::before {
content: “\f015”;
font-family: “FontAwesome”;
left: -5px;
font-size:2em;
position: absolute;
}

#9

Hi there,

Yes, because you have placed the icon in the list item and there are elements inside the list item that covers it.

Try increasing the z-index of the icon like this:

.x-nav>.current-menu-item::before {
    content: "\f015";
    font-family: "FontAwesome";
    left: -5px;
    font-size:2em;
    position: absolute;
    z-index: 9999;
}

Also, the icon had an absolute position so try adjusting the top and left value in the code.

Hope this helps.

1 Like
#10

Yes but nav not contain the icon and if i put more width here not fix the problem
.x-navbar .desktop .x-nav > .current-menu-item > a{
background-color:#fff;
(if i put here witdth for example 200 i not fix the problem see here https://imgur.com/a/n9YjR7p )
}

.x-nav>.current-menu-item::before {
content: "\f015";
font-family: "FontAwesome";
left: -15px;
top:-10px;
font-size:2em;
position: absolute;
z-index: 999;

}

#11

Hi Stefano,

Yes, that is because you have set the icon to be absolute.

Please check this link for explanation about the CSS position property.

If you want the icon to be included in the link item, try setting the position property to relative instead and make further adjustments in the code to position the icon properly.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#12

Width of navbar background not change… :frowning:
Please help me to set this icon :frowning:

#13

Hi @StefanoLisi,

Please also add this custom CSS:

.x-nav>.current-menu-item {
     position: relative;
}

If it still doesn’t work, please turn off the under construction mode so we can take a closer look.

Thanks.

#14

Now is public see: https://www.lecartedellamore.it
This is the custom css:
.x-navbar .desktop .x-nav > .current-menu-item > a{
background-color:#fff;
}
.x-nav>.current-menu-item::before {
content: “\f015”;
font-family: “FontAwesome”;
font-size:2em;
top:60px;
position: relative;
z-index: 9999;
}
.x-nav>.current-menu-item {
position: relative;
}

#15

Hey Stefano,

The cause of that layout issue is the incorrect addition of the icon to the menu item. That surely can be remedied but additional custom CSS would be needed to fix that adding additional complexity and bloat. Please follow the method shown in this video instead: https://youtu.be/6AyXYQH4yBU.

Remove this code given previously:

.x-nav>.current-menu-item::before {
content: "\f015";
font-family: "FontAwesome";
font-size:2em;
top:60px;
position: relative;
z-index: 9999;
}
.x-nav>.current-menu-item { 
position: relative;
}

The last block of code is not needed because all menus are already positioned relative.

If you still wish to continue with CSS, at the very least add the icon to the anchor tag like in the screenshot below.

Below is the CSS code in that screenshot. Please note that it is only a sample, we do not provide customization services as part of our product support. If you need anything further than that, you need to consult with a third-party developer.

.x-nav>.current-menu-item a::before {
    content: "\f015";
    font-family: "FontAwesome";
    font-size:2em;
    position: absolute;
    left: 10px;
    bottom: 3px;
}

.x-nav>.current-menu-item a {
    padding-left: 70px !important;
}

Hope that helps.

#16

Your css work fine but i think the best solution is add html code in navigation label thanks real helpful i’ve solved https://www.youtube.com/watch?v=6AyXYQH4yBU&feature=youtu.be thanks !

#17

You’re welcome. Glad it helped.

1 Like
#18

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