使用供应商文件，如何成功将引导程序图标导入到我的烧瓶项目中

Question

所以问题相当简单，一直在尝试为前端框架设置一个带有引导程序的烧瓶项目。因为我喜欢使用 svgs。

为了达到这一点，我无法显示我的引导程序图标，我只是在它们应该在的位置出现一个白色方块，这意味着它没有显示。

这是我的文件结构：

static
   |-css
   |  |-vendor
   |      |-bootstrap
   |      |       |-bootstrap.css
   |      |       |-bootstrap.min.css  
   |      |-bootstrap-icons
   |              |-bootstrap-icons.css
   |-fonts
   |  |-vendor
   |      |-bootstrap
                  |-bootstrap-icons.woff1
                  |-bootstrap-icons.woff2           

这是我与烧瓶一起使用的导入

（在基本 html 中

        <link rel="stylesheet" href="{{url_for('static', filename='/css/vendor/bootstrap/bootstrap.css')}}"/>
        <link rel="stylesheet" href="{{url_for('static', filename='/css/vendor/bootstrap/bootstrap.min.css')}}"/>
        <link rel="stylesheet" href="{{url_for('static', filename='/css/vendor/bootstrap-icons/bootstrap-icons.css')}}"/>

（在我的 bootstrap-icons css 文件中）

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("{{url_for('static', filename='/fonts/vendor/bootstrap/bootstrap-icons.woff2')}}") format("woff2"),
    url("{{url_for('static', filename='/fonts/vendor/bootstrap/bootstrap-icons.woff')}}") format("woff");
}

现在传统应用程序中的这种格式（使用相对路径对我来说很有效，但是在使用 Flask 应用程序时似乎根本不起作用。

我确实知道引导样式正在工作，因为其余的引导类正在应用，它似乎只是字体。

有人遇到过类似的事情吗？或者可以向我透露任何见解，我听说 boostrap-flask 或flask-bootstrap 是一件事，但考虑到它在图标之外都可以工作，我不想只安装另一个包来尝试在它之上找出答案。

我也尝试过更改文件路径，重新启动服务器等，引导文档也没有真正阐明它。

感谢您的协助。

编辑：

1.I have tried moving the icon im using to other parts of the code to make sure it wasn't just failing in that div.
2.Checking the icon in question is correct
3.Adding different icons to make sure it isn't just that the icon is not supported
4.Removed and readded all of the js / css bootstrap links. 
5.moved the bootstrap icons files to top level (inside static)

Answer 1

答案：

我已经弄清楚了，因为我是 Flask 新手并且使用完整堆栈，所以我没有意识到这一点，但似乎您只使用 url_for 来引用静态文件夹之外的静态。

在静态文件夹内，您使用标准关系路径。

（代替）

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("{{url_for('static', filename='/fonts/vendor/bootstrap/bootstrap-icons.woff2')}}") format("woff2"),
    url("{{url_for('static', filename='/fonts/vendor/bootstrap/bootstrap-icons.woff')}}") format("woff");
}

（就是这个）

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("../../../fonts/vendor/bootstrap/bootstrap-icons.woff2") format("woff2"),
    url("../../../fonts/vendor/bootstrap/bootstrap-icons.woff") format("woff");
}

（不确定我是否应该删除这个问题，但由于我在堆栈溢出上找不到答案，因此将保留它，以防有人遇到类似问题）