[Django]-My Django Project isn't loading Bootstrap glyphicons

by

4👍

✅

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/".

👤solarissmoke

Leave a comment