Utilizing Font Awesome icons dynamically presents challenges when integrating with SVG & JavaScript

Recently, I started using the new JS&SVG implementation of font-awesome's v5 icons. It seems to be working perfectly for icons (such as 

<i class='fas fa-home'></i>
) that are already present in the DOM at page load. The <i> tag successfully gets replaced with an <svg> tag.

However, a problem arises when I dynamically load HTML content from the server and insert it into the DOM. In this scenario, the <i> tags do not get converted, resulting in no icons being displayed. I have been unable to find any method in my JavaScript code that can force the JS implementation to reload the SVG icons after the new content is added to the DOM.

Has anyone else encountered this issue before?

javascriptajaxsvgfont-awesome

Answer №1

Utilizing it in this manner has been effective, even with "after-loaded" sections of HTML.

The contents of my fontawesome.js file appear as follows:

import { library, dom, config } from '@fortawesome/fontawesome-svg-core';

config.autoReplaceSvg = true;
config.observeMutations = true; // <- This is crucial

import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';

library.add(faUser, faFacebook);

// The following is also vital
// It replaces any existing <i> tags with <svg> and utilizes a MutationObserver to 
// persistently do so as the DOM evolves.
dom.watch();

...and subsequently I import this fontawesome.js into my vendors.js.

If it is not functioning as expected for you, the reason may be detailed in the documentation:

Differences in default configurations
When Font Awesome is loaded from @fortawesome/fontawesome-free or @fortawesome/fontawesome-pro, DOM watching is enabled by default, but it is disabled when using 

@fortawesome/fontawesome-svg-core
.

For more information, refer to these helpful links on configuration, DOM watching, and SVG JavaScript core.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone please explain the functionality of "next()" in middleware and how it operates?

Currently, I am following a tutorial by Net Ninjas on node.js and attempting to create my own examples to solidify the concepts in my mind. For reference, I refer to the GitHub source code available on their profile. However, I have encountered an issue at ...

javascriptnode.jsexpressservermiddleware

Passing an array from PHP to the DataTables JavaScript library

I am attempting to pass a PHP array to the JS Datatable library for testing purposes. Instead of fetching data from a database, I have simplified my approach. Here is a basic representation of my PHP code: $data_fmt['data'][] = array("TEST"); e ...

javascriptphpajaxdatatables

How to Send an Ajax Request from a Vue.js Application to WordPress

I've designed a custom page template to seamlessly integrate a vue app into an existing website <?php /* * Template Name: Registration Form */ get_header(); ?> <div id="app"></div> <?php get_footer(); ?> After some ...

phpajaxwordpressvue.jsaxios

Adding elements to a JSON array in JavaScript/AngularJS

Looking for help with inserting a new item "uid" into a JSON array. Here is the initial array: var testArr=[{name:"name1",age:20},{name:"name1",age:20},{name:"name1",age:20}] The desired output after inserting the "uid" would be: var testArr=[{name:"nam ...

javascriptjson

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

I've integrated Material-UI's <Table/> (http://www.material-ui.com/#/components/table) component with <TableRow/> containing checkboxes in a ReactJS project. While I can successfully select rows by checking the boxes, I am struggling ...

javascripthtmlreactjsmaterial-ui

Safari/Webkit executing function prematurely following ajax:complete event

I am currently working on an AJAX call which is functioning properly. However, I am facing an issue regarding the dimensions of an image. Since the images are dynamically resized, I cannot declare their dimensions in HTML. When I try to fetch these dimensi ...

jqueryajaxsafariwebkit

The perplexing results received when using the npm outdated command

Could someone provide an explanation for the meaning behind this output? $ npm --version 3.10.8 $ npm -g outdated npm Package Current Wanted Latest Location npm 3.10.8 4.0.2 3.10.9 As stated in the documentation, the "Wanted" column should d ...

javascriptnode.jsnpmnpm-install

How can I make an AJAX request in Rails 3 to retrieve an HTML page?

I am experimenting with using Rails to display an .html.erb template via an ajax request under specific conditions. By default, I am consistently receiving the .js.erb file when making an ajax request. Without delving into the reasons behind this choice, ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

After creating a CSS3 animation to fade out an element by adjusting its opacity from 1 to 0 and changing the position to absolute and display to none in the last frames, I encountered an issue. In Safari, only the opacity is maintained while the position a ...

javascriptjquerycsscss-animations

What advantages does using immutablejs offer compared to using object.freeze?

I've scoured the internet trying to find convincing reasons for using immutablejs instead of Object.freeze(), but I still haven't found a satisfactory answer! What are the advantages of working with non-native data structures in this library ove ...

javascriptreactjsimmutable.js

Is there a way for me to view the names of the images I am uploading on the console?

Recently, I've started using express and NodeJs. I've created a function called upload that is responsible for uploading images. Here is the code: const fs = require("fs"); var UserId = 2; var storage = multer.diskStorage({ destination: functi ...

javascriptnode.jsexpress

Setting up eslint for your new react project---Would you like any further

I am currently working on a TypeScript-based React application. To start off, I used the following command to create my React app with TypeScript template: npx create-react-app test-app --template typescript It's worth noting that eslint comes pre-co ...

javascriptreactjstypescripteslinteslintrc

How can global variables be effectively shared and edited between two separate runs of JavaScript nodes?

The primary function contained in main.js is as follows: var nLastPingTime = 0, nLastPingNumber = 0; module.exports = { compareData: function(nPingTime, nLastPingNumber){ nLastPingTime = nPingTime; nLastPingNumber = nLastPi ...

javascriptnode.js

"Escaping from the typeahead feature in Angular-UI Bootstrap results in the input field value becoming

Having some difficulty solving a particular edge case scenario. When I select a value from the dropdown of the typeahead using either the keyboard or mouse, the ng-model in the input field is populated correctly. However, if I type a few letters and then ...

javascriptangularjstwitter-bootstrap

Is there a specific method that can be implemented in Node.js to compare two strings and identify the common words or letters?

Looking for a solution: var str1="CodingIsFun"; var str2="ProgrammingRocks"; Is there any function that can provide a true value or flag in this case? ...

javascriptnode.jsstring

Issuing a straightforward GET request results in a significant delay in receiving a response

I have a simple app running on Node.js, Handlebars, and Express. The main page features a single button that triggers an asynchronous GET request when clicked, causing a console.log message to display. Initially, the first click on the Submit button shows ...

javascripthtmlnode.jsexpressasynchronous

What is the best way to divide an array of objects into three separate parts using JavaScript?

I am looking to arrange an array of objects in a specific order: The first set should include objects where the favorites array contains only one item. The second set should display objects where the favorites array is either undefined or empty. The third ...

javascriptarraysecmascript-6javascript-objectsecmascript-5

Showing a DIV multiple times with an additional text field in HTML and JS

As someone new to development, I am facing a requirement where I need to create a form with a dynamic field that can be added or removed using buttons. When the user clicks on the Add button, another field should appear, and when they click on Remove, the ...

javascriptphphtml

jQuery eliminates initial div just a single time

Here is a function I have created: function removeDiv() { var topmost = jQuery('.xx'); var totContent = topmost.find('.zz').length; var $target = jQuery('.xx').find('.zz').eq(0); if(totCont ...

javascriptjqueryajax

Registration and Mapping Interface API

Recently, I have been researching information for an application that we are planning to develop for our chain of stores (approximately 20). Our goal is to reward customers with points when they check-in at our store locations. Additionally, we aim to show ...

phpjavascriptiosrubyapi