The Django development server seems to be having trouble serving up Bootstrap 3 glyphicons

I'm facing an issue with a glyphicon from bootstrap in one of my templates on my website. Whenever I try to access the page, a 404 error pops up in the terminal and the icon doesn't appear. What's confusing is that the page works fine as a static page not hosted by my development server. Here's how the directories are organized:

-static
    -css
    -fonts
    -js
    -images
    -admin
-templates
    -relevant template

Here's the error message from one of the unsuccessful requests:

GET /fonts/glyphicons-halflings-regular.ttf HTTP/1.1" 404

It seems like the system is looking for the fonts folder in the root directory. Even when I move the folder there, it still can't locate it. Any suggestions on what might be causing this? Feel free to share any additional information that could help solve this issue. Thank you!

htmlcssdjangotwitter-bootstrap

Answer №1

it is crucial to configure the staticfiles app correctly

  1. Make sure that django.contrib.staticfiles is included in settings.INSTALLED_APPS
  2. Correctly set up setttings.STATIC_URL
  3. Ensure to include 
    {% load staticfile %} <img src="{% static 'img/foo.png' %}
    in your template

However, it is important to note that you should avoid having Django serve static files in a production environment - see this link for more information

Answer №2

One way to address this issue is to place the folder fonts/ directly within the static/ directory of your application.

The effectiveness of this solution may vary depending on how your project is set up. In my case, the following configuration works well:

In the settings.py file:

INSTALLED_APPS = [
   ...
   'django.contrib.staticfiles',
]
...
STATIC_URL = '/static/'

In the template file:

{% load static %}
<!-- Include Bootstrap -->
<link href="{% static 'myapp/bootstrap.min.css' %}" rel="stylesheet">

Directory structure:

myproject/
    myapp/
        static/
            myapp/
                bootstrap.css
                bootstrap.js
            fonts/
                glyphicons...

This method ensures that both /static/myapp/bootstrap.css and /static/fonts/glyphicon.ttf are served as static files in debug mode.

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

Guide on emailing a particular subscriber based on the topic within AWS SNS

In my AWS SNS topic, I have multiple subscribers with Email protocol and their email addresses as endpoints. Using an API built in Django, I aim to send emails to current users. To achieve this, I need to retrieve all subscribers from the topic, match th ...

djangoamazon-web-servicesemailboto3amazon-sns

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

javascripthtmlcssangularjsangular-ui-grid

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

javascriptjquerycsscordova

Converting Excel values to Exponential format using Python

I'm struggling to find a solution for extracting the Invoice Number in Python from an Excel sheet without turning it into exponential form. Expected Value: 8000030910 Result: 8.00002e+09 Python Result Excel sheet d1.append(sheet.cell_value(j,0)) ...

pythonhtmlexcel

JavaScript Issue: Unable to Update or Delete Table Row Data

Presently, I am involved in developing a project titled : Tennis Club Management using a blend of Javascript, HTML, CSS, and Bootstrap. This project encompasses several HTML pages and a JS file such as index.html, profile.html, manageFees.html, index.js, e ...

javascripthtmlcssbootstrap-4

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Currently dealing with a bug that occurs when attempting to push the same string into an array that has already been added. The app becomes stuck and prevents the addition of another string. How can I prevent the repeat from causing the app to get stuck w ...

javascripthtmlangularjsarrays

defined dimension of table cell

<table class="data-table"> <tr> <th style="width: 200px;"> DescriptionDescription <%--in this case <td> is resized--%> </th> </tr> <% foreach (var item in Model) { %> ...

htmlasp.net-mvccss

Remove the content located beside an input element

Seeking assistance for a straightforward query: Snippet of code: <span> <input id="elemento_20_1" name="elemento_20_1" class="elemento text" size="2" maxlength="2" value="" type="text"> / <label for="elemento_20_1">DD</label> < ...

javascriptjqueryhtmljquery-selectors

Struggling with Bootstrap 4 - need help with navbar and flexbox alignment issues

My goal is to recreate a navigation bar similar to this design: navbar I initially attempted to use the grid system for my navbar, but it didn't work out as expected. After some research, I found that using the grid system for navbars is not recomme ...

htmlcssbootstrap-4

Wrapping flex items inside a table in IE11: A guide

I am facing an issue with the code (codepen here) that works in normal browsers but not in IE11... I need the cards to be wrapped within the displayed window vertically, without any horizontal scrolling. https://i.sstatic.net/PnxR9.png .table {display: ...

htmlcssflexboxinternet-explorer-11

Tips for aligning the list style icon perfectly with the text

I need help aligning text in the center of a customer list style image for an LI element. I've attempted using margins and paddings, but it hasn't worked. Here's the code and screenshot: HTML: <ul class="homeList"> <li>Over ...

htmlcsslisthtml-lists

Keep Debug mode enabled in Django for in-house applications

I recently inherited a Django project that is being used internally only. It's hosted on a local network and not deployed to a public website. The previous developer had mistakenly left DEBUG = True in the settings.py file. While Django documentation ...

pythondjangodebugging

Can you explain the concept of a host server?

Hello, I am new to using cPanel and I recently uploaded a script to my domain directory. While trying to install the script, I was prompted to input my host server information. You can view the screenshot here: https://i.sstatic.net/rrVEX.png ...

phphtmllocalhostcpanelweb-hosting

"Utilizing AJAX in JavaScript to render HTML content and inserting it into an HTML element with a specific id

I ran into an issue while trying to display HTML content in a Bootstrap modal using AJAX. The class seems to be malfunctioning and I'm unable to pinpoint the source of the error. Here's the code snippet: var all_gaugeKritis5 = ""; all_gaugeKrit ...

javascripthtmlajaxcodeigniterbootstrap-4

Interactive iframe material using $_POST variables

Working with PHP has always posed a challenge for me. Typically, I navigate through by searching and trial and error, but this time I'm stuck. Currently, I'm developing a project that allows users to order services online. The ordering module is ...

phphtmlpostiframe

The JavaScript function you are trying to access is not defined, resulting in a

While attempting to run an Ajax request, I encountered a ReferenceError: getData is not defined in the Console. Interestingly, this code was functioning perfectly around 6 months ago. Despite looking through previously posed questions, I have been unable ...

javascripthtml

Creating users with varying levels of access using a Django form

In the Django system I'm currently developing, I've implemented four levels of users: 1. Basic (limited access) 2. Admin (full access for updates/changes/deletes) 3. Gatekeeper (can only create Admin users, no other permissions) 4. Developer (ful ...

djangodjango-custom-user

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

javascripthtmljquerycss

Looping CSS text animation with typing effect

I am struggling with a CSS code that types out text, but it only does so once and I need it to repeat infinitely. Despite adding animation-iteration-count: infinite;, it still doesn't work as intended. Another issue is that it slows down at the end. H ...

htmlcssanimation

Using jQuery to modify the contents of a div in real-time is resulting in the loss of HTML encoding

I have come across a situation where I am dynamically changing the HTML content of a div called 'accordion' using the following code: // The variable htmlstring contains some HTML code with special characters like &, ', etc. // For example: ...

javascriptjqueryhtml