我的Django项目未加载Bootstrap字形 [英] My Django Project isn't loading Bootstrap glyphicons

问题描述

当我加载页面时，我在终端中收到以下消息：

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 

我在上面加载该字形图标的home_page代码位于上面：

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>

我的引导文件位于：

• 我的项目文件夹
  
  
  
  
  • 静态文件夹
    
    
    
    
    • bootstrapmin。 css
    
    
    • style.css
    
    
    • fonts文件夹
      
      
      
      
      • 以下是文件Django无法找到
      
      

      我尝试做的事情：

      
      
      1. 移动以下文件将fonts文件夹移至引导程序的相同路径
      
      
      2. 将fonts文件夹移至静态文件夹之外。
      
      

      如果您需要我没有提供的任何信息，请询问，我会的。
      伙计们，怎么了？在此先感谢您的帮助！

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

      推荐答案

      默认情况下，Bootstrap的CSS定义了字体的相对路径，如下所示：

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

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

      这意味着浏览器将尝试从CSS文件所在的目录中向上查找 fonts 目录的目录。就您的项目结构而言，意味着它试图获取 /fonts/glyphicons-halflings-regular.woff2 而不是 / static / 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.

      最简单的解决方案是坚持使用文档中建议的目录结构，并将所有CSS放入 css中目录与 fonts 目录位于同一级别：

      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
      

      显然，现在您必须使用 css 前缀：

      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' %}">
      

      更复杂的解决方案是下载已定制版本的Bootstrap，您在其中设置了自定义 @ icon-font-path （请注意默认值： ../ fonts / ）。使用您当前的项目结构，您需要将其更改为 / static / fonts / 。

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

      这篇关于我的Django项目未加载Bootstrap字形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！