Issue encountered when utilizing FontAwesome in xhtml file in jdeveloper

Attempting to integrate font-awesome into my .xhtml page is proving to be a challenge, resulting in errors as shown in the image below.

My development environment is Jdeveloper 12.2.1.

Despite researching various topics, I have yet to find a solution. Any assistance would be greatly appreciated.

https://i.sstatic.net/IdBPf.png Edit :

The project functions properly when utilizing a .html file instead of a .xhtml file.

Therefore, the issue does not stem from incorrect paths.

I suspect that there may be some missing configurations still to be addressed.

javascriptcssbootstrap-4xhtmlfont-awesome

Answer №1

Success was achieved by inserting ../ at the start of the href or by including 

#{facesContext.externalContext.requestContextPath}

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" type="image/png" href="images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="../vendor/animate/animate.css"/>
    <link rel="stylesheet" type="text/css" href="../vendor/css-hamburgers/hamburgers.min.css"/>
    <link rel="stylesheet" type="text/css" href="../vendor/select2/select2.min.css"/>    
    <link rel="stylesheet" type="text/css" href="../css/util.css"/>
    <link rel="stylesheet" type="text/css" href="../css/main.css"/>
</h:head>

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

Animating jQuery Counter with Changing Background Color

I've implemented a Counter that counts from 0 to a specified number, and it seems to be working perfectly. However, I want to add an animation where the background color of a div height animates upwards corresponding to the percentage of the counter. ...

javascriptjqueryhtmlcss

Effective and Sustainable Methods for Error Management in Node/Express API Endpoints

Throughout my experience with developing MEAN Stack applications and setting up APIs, I have encountered some uncertainty when it comes to handling errors within API Routes. If there are any inaccuracies in my explanation or if my concepts are flawed, ple ...

javascriptnode.jsmongodbexpresserror-handling

Presenting a Random Term from an Array in Dual Locations

<input type="button" id="btnSearch" value="Search" onclick="myFunction();" /> <div id="message"> <p></p> </div> <br> <div id="message"> <p></p> </div> <script type="text/javascript"&g ...

javascriptarraysbuttonrandom

The logical OR operator in JavaScript (denoted as ||)

Can anyone explain the functionality of this operator in JavaScript? I have come across this operator in two different contexts: //context 1 function(e){ e = e || window.event; //context 2 if(a || b) In C or C++, I understand that the return value of th ...

javascript

Ensure the column breaks before the element without disrupting the wrapper in CSS

My objective is to always initiate a line break before a specific element, in this case, the h2 tag: https://i.sstatic.net/fy80H.png https://jsfiddle.net/hv0sm40o/3/ html <div class="columns"> <h2>Jelly pastry chocolate cake pastry</h2&g ...

htmlcsscss-multicolumn-layout

Tips for using multiple Angular directive modules in PprodWant to enhance your Pprod experience by

Currently, I am working on jhipster Release 0.7.0 and our jhipster app has multiple types of directive modules – one for the index page and another for common directives. However, when we run the app on Prod profile, an exception occurs: [31mPhantomJ ...

javascriptangularjsjhipster

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Blurring the boundary of Slick's carousel with a fade effect

Currently, I am utilizing the Slick Carousel plugin developed by Ken Wheeler. In the image provided below, you can observe that when a slide is transitioning at the edge, it appears to be abruptly cut off. I am contemplating the implementation of a "fading ...

javascriptjqueryhtmlcss

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

Efficient utilization of the bootstrap form-group for optimal responsiveness

I've encountered an issue with the form-group class in Bootstrap. You can view the problem on this link. After analyzing the problem, I found that when viewing the code on a small or medium-sized device, the space between "Statut" and "Etat" appears ...

htmlcsstwitter-bootstrap

Is there a way to implement DnD functionality on a dynamically generated div element within an HTML page using Dojo

Is it possible to implement drag and drop functionality on dynamically generated div elements using Dojo? I have experimented with various methods to incorporate this feature. Below is a snippet of my code: var inputdiv = document.createElement('div& ...

javascriptdojo

Adding an object to a document's property array based on a condition in MongoDB using Mongoose

I have a situation where I need to push an object with a date property into an array of objects stored in a MongoDB document. However, I only want to push the object if an object with the same date doesn't already exist in the array. I've been e ...

javascriptnode.jsmongodbmongoose

Align the CSS dropdown content to the right rather than the left for a cleaner layout

The information in this dropdown menu is currently aligned to the left of the icon. I would like it to be aligned to the right. Thank you! <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releas ...

htmlcss

Is it possible to use HTML code as content in CSS?

How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...

phphtmlcss

Removing a record from a database using ASP.NET MVC 5

Looking for some insight on the behavior of my JavaScript and Action in the Controller. Below are the current code snippets: Index.chtml @model IEnumerable<WebSensoryMvc.Models.SessionData> @{ ViewBag.Title = "Index"; Layou ...

javascriptjqueryasp.netajaxasp.net-mvc

When attempting to display the image file path using the JavaScript API Notification in Angular, there is a challenge in

Hello fellow developers, I am currently facing an issue with retrieving a local image from my assets folder and displaying it on a new Notification object generated by the Web Notification API. I have an image in my assets folder with a .jpeg extension. ...

javascriptangularnotificationscustomization

Include token in src tag requests Angular version 8

In the process of developing a website, I have encountered a challenge. I am creating a platform where users can access another website I am currently working on after they log in. Once authorized, users receive a JWT token which is sent in the header with ...

javascripthtmlangularasp.net-core

What is the process for updating the ID within a Select2 ajax script function?

I am facing an issue with my select2 ajax script. The unique_ID in my table field is named "no", which is causing me to be unable to select an item in Select2 drop down. However, when I changed the name of my database table field from "no_donatur" to "ID", ...

javascriptphpjqueryajaxcodeigniter

React with debouncing and parameters

Currently, I am attempting to implement debouncing for a function using underscore's debounce, which is passed as a prop to a component. In the past, I was successful in achieving this by using the following approach: componentWillMount() { this. ...

javascriptreactjs

AssertionError [ERR_ASSERTION]: The value of undefined is not equal to 390 in the GitLab

I'm a bit confused about the AssertionError [ERR_ASSERTION]: undefined == 390 in Gitlab. What I need is: The sumSalaries(obj) function, which should take an object obj as a parameter where the field names correspond to the employee's name and t ...

javascriptobjectgitlabjavascript-objects