Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason.
Even after ensuring that the font files were intact and replacing them with fresh ones from version 3.2, the issue persisted.
I checked the CSS options which seemed fine:

src: url(#{resource['fonts:glyphicons-halflings-regular.eot']}) format('embedded-opentype');
src: url(#{resource['fonts:glyphicons-halflings-regular.woff']}) format('woff');
src: url(#{resource['fonts:glyphicons-halflings-regular.ttf']}) format('truetype');
src: url(#{resource['fonts:glyphicons-halflings-regular.svg']}) format('svg');

The bootstrap.css file was loading correctly, yet the icons still weren't showing up on the site.
Despite checking everything meticulously, including latest font versions and correct configuration, I couldn't find any errors or reasons for this issue.

EDIT
For context, my setup includes Wildfly 8.1, JSF 2.2, and Bootstrap 3.0.

EDIT 2
My colleague mentioned that this problem arose after migrating our app from JBoss 7.2 to Wildfly 8.0, hinting at a possible cause.

htmlcsstwitter-bootstrapjsf

Answer №1

To incorporate the fonts, simply add them to the directory /webapp/resources/fonts and then make modifications to your LESS or CSS code by updating the @font-face block as shown below:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}");
    src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
            url("#{resource['fonts/glyphicons-halflings-regular.woff']}") format('woff'),
            url("#{resource['fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),
            url("#{resource['fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg');
}

You can find more information in my post located at this link:

Additionally, I suggest utilizing LESS instead of compiled CSS due to its user-friendly nature and flexibility in altering the appearance of your website by modifying variables or incorporating themes. Another helpful resource you may consider is

Furthermore, if you encounter issues with serving the fonts on Wildfly, it might be necessary to configure MIME mappings. While I typically use Tomcat and not as familiar with Wildfly, a related issue elsewhere suggests including the following:

<mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/font-sfnt</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/font-woff</mime-type>
</mime-mapping>

Answer №2

Well, unfortunately the problem remains unresolved. After deciding that I no longer wanted to waste time on this issue, I made the switch to font-awesome. The transition went smoothly and everything is now working perfectly.
Thank you for your assistance.

Answer №3

To fix the issue at hand, I followed the steps outlined in this blog post:

The solution provided mirrors samael's approach, albeit with a slightly tweaked syntax adjustment. The key is to modify either bootstrap.css or bootstrap.min.css.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("#{resource['fonts:glyphicons-halflings-regular.eot']}");
  src: url("#{resource['fonts:glyphicons-halflings-regular.eot?#iefix'}") 
           format('embedded-opentype'), 
       url("#{resource['fonts:glyphicons-halflings-regular.woff']}") 
           format('woff'), 
       url("#{resource['fonts:glyphicons-halflings-regular.ttf']}")
           format('truetype'), 
       url("#{resource['fonts:glyphicons-halflings-regular.svg#glyphicons_halflingsregular'}") 
           format('svg');
}

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

What is the best way to add character limits to an HTML form?

Hello there, I am currently working on creating an HTML form to generate a PDF file. However, I am facing difficulties in figuring out how to create the character placeholders for text input fields (as shown in the screenshot of a sample PDF file below). ...

htmlforms

Aligning content within an <a> container

I am in the process of creating a square box that is clickable and will redirect users to another page. To achieve this functionality, as well as implement hover effects later on, I am utilizing the < a > element. Below is the HTML markup: <a id ...

htmlcss

The HTML code displays the changes in output after resizing the screen

Currently, I am utilizing canvas(graph) within my Angular JS UI5 application. My main goal is to increase the width of the graph. However, whenever I attempt to adjust the size of the Graph, it remains unchanged. Interestingly, when I shrink the screen, th ...

htmlangularjs

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

javascriptjqueryhtmlcssbutton

Having difficulty invoking a JavaScript function through PHP

My goal is to achieve the following: <html> <script type="text/javascript" src="jquery.js"></script> <a id="random">before</a> <script> function test(a) { document.getElementById('random').innerHTM ...

javascriptphpjqueryhtml

Issue with background in list items

I am struggling with aligning the background of my vertical menu to the right and center from the top. Here is the code I have tried: ul.nav { margin:0; background-position:center; background-image: url(../images/nav_bg.gif);font-family: "Century Go ...

css

What is the best way to retrieve the value of a submitted button in a jQuery form submission?

I am facing an issue with my HTML code. Here is the structure: <form method="post" id="IssueForm" action="wh_sir_insert.php"> <input name='id[]' type='checkbox' class="selectable" value='$col[8]' /> <inpu ...

phpjqueryhtml

How to horizontally align a logo image in the appBar using Material-UI (ReactJS)

I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...

cssreactjsmaterial-ui

Turn off Chrome Autofill feature when placeholders are being used in forms

I am encountering difficulties with Google autofill for fields that have placeholders. Despite attempting various solutions provided at: Disabling Chrome Autofill, none of them seem to work as needed. The challenge is to create a form with different field ...

javascripthtmlcssgoogle-chromeautofill

Is there a way to use JavaScript to switch the entire div on and off

I have a function called done that I want to use to toggle the visibility of my "temp" division. tasks.innerHTML += `<div id="temp"> <span id="taskname"> ${input.value} </span> <button class="d ...

javascripthtmlfunctiontoggleinnerhtml

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

htmlcssasp.nethtml-tablewebforms

Flexbox: The final element is not positioned on the right side

I have been trying to align the final item on the right side using margin-left: auto. The desired output is achieved in jsfiddle. I am using Visual Studio Code with the same code, but when viewed in Firefox, Chrome, or Edge, the item does not appear on the ...

htmlcssflexbox

Select multiple options with personalized text using V-select

Can anyone help me with populating a v-select component from Vuetify 1.5 with checkboxes using multiple? The issue arises when I add <template slot='item' slot-scope='{ item }'></template>. It seems that the checkboxes do no ...

htmlvue.jsvuetify.jsv-select

Aptana Studio 3 fails to detect PHP code embedded within an .html file

When writing code, such as: <!DOCTYPE html> <html> <body> <?php echo "My first PHP script!"; ?> </body> </html> After <?php, I am encountering a red X icon error indicating that a ">" is missing at the end of t ...

phphtmlaptanaaptana3

Ways to enhance the legibility and visibility of the text

On my website, there's an image that appears as follows: https://i.sstatic.net/bCE3k.png I attempted to add a shadow to the text, resulting in this look: https://i.sstatic.net/4ha0J.png However, the shadow seems out of place. Any ideas on how I c ...

htmlcsstextbackgroundphoto

The jquery click event is not working as expected

Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...

javascriptjquerycss

calculating the duration between successive PHP form submissions

I am trying to calculate the duration between when a user submits a PHP form and when they submit it again. The form reloads on the same page, essentially refreshing it. Additionally, the user may enter the same data again. I want the timer to start runnin ...

javascriptphppythonhtmljson

Implement feature to enable selection using jQuery

I have a question about implementing an <option value="fiat">Fiat</option>"> element into a dropdown list using jQuery. I've tried the code below and encountered some issues. When I click the button, I want to add the <option value= ...

javascriptjqueryhtml

Is it possible for a div nested within another div to still occupy space on the page despite being set

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $("select#choosebook").change(function(){ $(".title").slideDown(" ...

javascripthtmlcss

Import HTML file into email message

After successfully creating a script to send HTML emails, I encountered an issue. I have the email content stored in a separate HTML file, which is then read using a while loop and fgets(). However, I need to find a way to pass variables into the HTML. For ...

phphtmlemail