Experimenting with creating a seamless 'single-page' experience, I've managed to achieve this by implementing an event listener in jQuery for menu link clicks. This triggers the replacement of the existing content in my main div with an HTML snippet. Here's an example:
//this code is inside the 'on click'
$.get("includes/portfolio.inc", function(data) {
$("#content").html(data)
}, "HTML");
Everything seems to be functioning properly except for one issue: the list bullets from font-awesome disappear when the snippet is loaded. Interestingly, they are present on the initial static page but vanish when fetched as a snippet. Below is the structure of the HTML snippet causing the problem:
<h1>A Header!</h1>
<ul>
<li><i class=\"fa fa-chevron-circle-right\"></i> Example Link</li>
...
</ul>
I'm curious if there could be a specific reason for this styling to disappear. Could it be due to the use of the .inc extension in the snippets causing compatibility issues? It should be noted that nothing else in the file has changed, including links to external stylesheets and scripts, and all other markup renders correctly. Any assistance would be greatly appreciated!
UPDATE: After adding console.log(data); within the $.get() anonymous function, I can confirm that the <li> elements, along with the <i class="fa ...">, are being outputted intact.
The imported markup maintains the same styles as expected, except for the missing font-awesome classes.