Support » Developing with WordPress » font awsome is not functioning after inserting the code in function.php

font awsome is not functioning after inserting the code in function.php

  • johannes999

    (@johannes999)


    1 month, 1 week ago

    Hello,
    to use font awsome I have set this code in my function.php 

    
function enqueue_fa_script()  {
	
wp_enqueue_script('fascript','https://kit.fontawesome.com/8b5c83d55f.js') ; 
}
add_action('wp_enqueue_scripts', 'enqueue_fa_script');

    I got the kit code from font awsome website:

    

<script src="https://kit.fontawesome.com/8b5c83d55f.js" crossorigin="anonymous"></script>

    my html code is :

    <div class="header-section3">				
		 direct bellen			
	</div>			
		<div class= "tel-icon">				
				<i class="fa-solid fa-phone-xmark"></i>
			</div> </div>

    the problem is it is not working I don’t anderstand why?
    wat can be the error?
    thanks

    • This topic was modified 1 month, 1 week ago by Steve Stern (sterndata).
    • This topic was modified 1 month, 1 week ago by bcworkz. Reason: code format fixed

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • threadi

    (@threadi)

    1 month, 1 week ago

    As far as I can see, this inclusion reloads various style files. In these the path to font files is also present, but they are apparently not executed and also not found.

    I like to use this plugin for this case: https://wordpress.org/plugins/font-awesome/ – that saves the own embedding.

    Thread Starter johannes999

    (@johannes999)

    1 month, 1 week ago

    thanks,
    I did but I don’t see any action.
    do I have also copy and paste cdn adres in my header,
    if yes from which website exactly?

    threadi

    (@threadi)

    1 month, 1 week ago

    No, as far as I know, you don’t have to do anything with the plugin other than integrating it. If you have questions about the handling, please ask in their support forum: https://wordpress.org/support/plugin/font-awesome/

    Thread Starter johannes999

    (@johannes999)

    1 month, 1 week ago

    thanks,
    johannes

    Moderator bcworkz

    (@bcworkz)

    1 month, 1 week ago

    I agree that using a plugin would be the easiest solution. But debugging your current implementation could be instructional. There appears to be an issue with how you built your FontAwesome kit. Three different styles are applied to the same font family name. Each needs to have its own name. There is no reference to class fa-phone-xmark in any CSS that is loaded on the page. There is not even CSS to relate class fa-solid to the FontAwesome font family.

    If you were to add

    .fa-solid {
    font-family: 'FontAwesome';
}

    in Additional CSS and change the HTML class attribute to "fa-solid fa-phone", you will see a FontAwesome icon on the page. “fa-phone” only because it’s defined in existing CSS. The icon may be poorly positioned and the wrong color, but at least FontAwesome is working. This is not a suggested solution, it only serves to demonstrate what the issues are.

    I don’t know anything about building FontAwesome kits, but there must be an issue with it since the needed CSS is missing and the font-family name is wrongly re-used. For further guidance in building FontAwesome kits, I suggest using their own support resources:
    https://fontawesome.com/support

    Or just use the plugin 🙂

    Thread Starter johannes999

    (@johannes999)

    1 month, 1 week ago

    thanks,
    but it is not working with plug in either.

    Moderator bcworkz

    (@bcworkz)

    1 month ago

    fa-phone-xmark is a pro-only icon. Try using one of the free icons like fa-phone. If you add the CSS I posted earlier to the customizer’s Additional CSS section and utilize only free icons, FontAwesome will at least work. Maybe not optimally and with a more limited set of icons and styles, but it’ll work.

    Obviously a crude workaround. If you want to chase after a proper fix, I suggest manually implementing a webfont solution as outlined in their docs. You’d be limited to free icons this way. Be sure to remove any existing FontAwesome scripts and CSS to avoid conflicts. You can keep the existing HTML mostly as-is, except only reference free icons.

    If you really need to use pro-only icons, I recommend building a new kit, striving to keep it as simple as possible, keeping as many default settings as you can.

    Thread Starter johannes999

    (@johannes999)

    1 month ago

    thanks
    johannes

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Topic Tags

Views