My Django Project isn't loading Bootstrap glyphicons

Question

When I load my page I got the following messages in my terminal:

Not Found: /fonts/glyphicons-halflings-regular.woff2                                                                                                           
[24/Aug/2016 17:19:36] "GET /fonts/glyphicons-halflings-regular.woff2 HTTP/1.1" 404 2238                                                                       
Not Found: /fonts/glyphicons-halflings-regular.woff                                                                                                            
[24/Aug/2016 17:19:36] "GET /fonts/glyphicons-halflings-regular.woff HTTP/1.1" 404 2235                                                                        
Not Found: /fonts/glyphicons-halflings-regular.ttf 

My home_page code where I load this glyphicon is above:

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrapmin.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <a class="navbar-brand" href="">
            <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp
            <button class="btn-link" type="button"> OntoLogica</button>

        </a>         
    </div>
</nav>

My bootstrap files are in:

• My Project Folder
  • static Folder
    • bootstrapmin.css
    • style.css
    • fonts Folder
      • Here are the files that the Django couldn't find

What I've tried to do:

1. Move the files of the fonts Folder to the same path of the bootstrap
2. Move the fonts folder outside the static folder.

If you need any information I didn't provide, please ask and I will. Guys, what is wrong? Thanks in advance for any help!

Answer 1

By default, Bootstrap's CSS defines a relative path to the fonts that looks like this:

../fonts/glyphicons-halflings-regular.woff2

This means that the browser will try to look one directory up from where the CSS file is for a fonts directory. In the case of your project structure is means that it tries to fetch /fonts/glyphicons-halflings-regular.woff2 instead of /static/fonts/glyphicons-halflings-regular.woff2 which is where they actually are.

The simplest solution is to stick to the directory structure recommended in the documentation and to put all of your CSS inside a css directory that sites on the same level as the fonts directory:

- static
    - css
       - bootstrap.min.css
       - style.css
    - fonts
       - glyphicons-halflings-regular.woff2

Obviously you now have to refer to the files with the css prefix:

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">

The more complex solution is to download a customised version of Bootstrap where you set a custom @icon-font-path (note the default: "../fonts/"). With your current project structure you would need to change it to "/static/fonts/".