JSF icons are not displaying

I'm currently working on a Java application using JSF. I've added phone icons and message envelopes, but they're not showing up. I tried putting them in the <li> tag, but still no luck.

<Li> <i class = "fa fa-phone"> </ i> +2 95 01 88 821 </ li>
<Li> <i class = "fa fa-envelope"> </ i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11787f777e51757e7c70787f3f727e7c">[email protected]</a> </ li>

This is what it's supposed to look like:

UPDATE

I added the font:

  <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/font-awesome.min.css" />

Yet, the icons are still not displaying.

View the icons here

File hierarchy: hierarchy

htmlcss

Answer №1

There is an issue with your HTML code as it contains extra spaces that need to be removed:

<li><i class="fa fa-phone"></i>+2 95 01 88 821</li>
<li><i class="fa fa-envelope"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670e0901082703080a060e094904080a">[email protected]</a></li>

It is recommended to use lowercase tag names in HTML.
Make sure you have CSS styling for the classes fa, fa-envelope, and fa-phone...

Update
Based on your comments, it seems like you don't have CSS or Font Awesome included in your HTML. You will need to add them.

@cjslv suggested checking out for Font Awesome resources.
Additionally, I recommend refreshing your knowledge of HTML and CSS.

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

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

implement a Django for loop within the template by utilizing JavaScript

Is it possible to incorporate a {% for in %} loop and {{ variables }} in a Django template using JavaScript DOM (insertAdjacentText, or textContent) and dynamically load data from the views without refreshing the entire page? If so, can you please guide me ...

javascriptpythonhtmldjangoajax

What's the best way to show a submenu when the main menu is scrollable?

I'm facing a challenge with the following issue: I am working with angular 8 and utilizing tieredMenu from primeng 8. The problem arises when I have a scroll, causing the tieredMenu's submenu to be hidden. Do you have any suggestions on how to ...

htmlcssangularprimeng

What steps can be taken to enable automatic playback for this slider?

After downloading the slider from this site, I've been attempting to enable autoplay on this slider but have not had any success. Can anyone provide guidance on how I can achieve this? I've tried modifying the code below without achieving the des ...

javascriptjqueryhtmlcss

What ways can we implement identification features in Flutter Web applications, such as adding an ID or name property?

While developing a Flutter Web application, I am exploring a Web-UI-Testing framework that is Selenium-based. Unfortunately, I am struggling to locate an HTML element that represents a specific flutter widget by its id or name attribute. The widget key doe ...

javascripthtmlseleniumflutterflutter-web

Retrieving information from an alternative tag with Beautifulsoup

I need to extract specific HTML code using Python. Here is my current Python code: soup = ''' <p> <strong> abc </strong> </p> <ul> <l ...

htmlpython-3.xubuntubeautifulsoup

The checkboxes do not appear to be updating visually when the "checked" property is toggled programmatically

Check out this example on JSFiddle for a demonstration. Clicking on a checkbox should cause all the neighboring checkboxes to toggle on or off. Even though the "checked" property is toggling, there doesn't seem to be any visual change. n.prop("chec ...

javascriptjqueryhtmlcss

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...

htmlcsstwitter-bootstrap

Using jQuery to Fade Out a DIV from multiple dropdown menus

Is there a way to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are reverted back to the original ("None") selection? Any help would be appreciated. Thank you. *I have successfully implemented thisDIV fadeIn() using "change" whenever ...

jqueryhtmlcssfadeout

Extracting data from a dynamic table structure

Currently, I am working alongside my backend developer to address some challenges with form submissions. The specific situation involves a table within an HTML form that consists of two columns and rows that can be dynamically added. Users have the ability ...

javascripthtmlasp.netvisual-studio

Is there a modern HTML5 equivalent to the Cache-Control and Pragma directives for HTTP headers?

I have been working on updating the HTML of a website to ensure it is compliant with HTML5 standards. The current site contains two meta http-equiv elements: Cache-Control Pragma My question is, are these two elements HTML5 compliant? If not, what alter ...

htmldirectivespecificationsforward-compatibilityhttp-equiv

Tips for choosing multiple files with the Ctrl key in a list item element:

We have decided to create our own browsing functionality due to the limitations of the existing HTML browse feature. While using the HTML browse, we can only select multiple files by pressing the Ctrl key, and we want to replicate this feature in our custo ...

javascripthtmlangularjs

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

javascriptjquerycss

Retrieving the elapsed time in seconds from a timer function and displaying it in my

I'm looking to transfer the minutes and seconds from my template's timer to my view. I've experimented with various approaches using an ajax.post request, but it hasn't quite worked as expected. Here is a snippet of my template code: ...

javascripthtmldjangodjango-views

What is the process for transferring inputted values from a form on one HTML page to variables on another HTML page?

For the website I am currently developing, I have implemented a form on an options page with the following code: <form method="POST" action="process.asp" name="form1"> <table width="70%" border="0" cellspacing="0" cellpadding="0"> ...

javascripthtmlasp-classic

In an effort to organize a roster of student roll numbers for the class, I am utilizing a JavaScript function to generate and update an array with the most recent entries

Greetings! I am looking to enhance the functionality of my webpage by allowing users to input the name and roll number of a new student. Once submitted, I want to add this student to an existing list using Javascript functions, for loops, and arrays, and d ...

javascripthtmlarraysfunctionfor-loop

unique map customized in a separate browser window

Attempting to complete the code provided here but encountering issues as a novice in java-scripting. It seems like the map is not loading correctly. A new tab and text are generated when DIV is created. Seeking assistance on how to open a custom map in a ...

javascripthtmlgoogle-maps

I've developed a JQuery function that dynamically changes the active state on hover. My goal is to automate this process in order to streamline the workflow and

My JQuery code is quite simple and it controls the hiding/unhiding of an element depending on which tab is hovered over: HTML: <div class="row col-sm-4"> <ul class="text-center"> <li><p class="chat-provider-tab tab" ...

jqueryhtmlcssautomation

Ways to conceal table rows depending on their content

I am currently developing a project using Angular 2. One of the features includes a summary section that consolidates all the data from other sections. The summary is presented in a table format, with each row displaying the field name in the first colum ...

htmlangulartypescriptangular2-forms

Creating a 2x2 grid layout with flexbox styling

Having trouble creating a customized 2 by 2 grid using flexbox at the moment. Here is my goal: https://i.sstatic.net/uiGOD.png The height of 1 and 2 should be smaller than 3 and 4. And the width of 1 and 3 should be wider than 2 and 4. I attempted to a ...

htmlcssflexbox