Flask中font-awesome无效?

发布于 2022-09-02 01:33:14 字数 2063 浏览 11 评论 0

学习用Flask框架搭建一个自己的主页。
想要在页面中使用font-awsome显示小图标,无效。
使用bootstrap框架。
已经用浏览器看过,font-awesome.min.css文件可以正常加载。
代码如下:

<head>
    <!-- use bootstrap -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{url_for('static', filename ='font-awesome/css/font-awesome.min.css')}}" type="text/css">
    <link rel="stylesheet" href="{{url_for('static', filename='custom.css')}}" type="text/css"/>
</head>
<!-- 用font-awesome显示小图标 -->
        <div class="nav navbar-nav navbar-right">
            <li>
                <a href="https://github.com/penguin-penpen" target="_blank">
                    <i class="fa fa-github"></i> 
                </a>
            </li>
        </div>

static目录结构:

.
├── static
│   ├── bootstrap
│   │   ├── css
│   │   ├── fonts
│   │   └── js
│   ├── font-awesome
│   │   ├── css
│   │   ├── font
│   │   ├── less
│   │   ├── scss
│   │   └── src
│   │       ├── _includes
│   │       │   ├── ads
│   │       │   ├── community
│   │       │   ├── examples
│   │       │   ├── icons
│   │       │   └── tests
│   │       ├── _layouts
│   │       ├── _plugins
│   │       └── assets
│   │           ├── css
│   │           ├── font-awesome
│   │           │   ├── font
│   │           │   ├── less
│   │           │   └── scss
│   │           ├── ico
│   │           ├── img
│   │           ├── js
│   │           └── less
│   │               └── bootstrap-2.3.2
│   ├── images
│   └── moment
└── templates

我的所有css文件都是放在css目录里的,html文件在templates目录里。
有谁能给点建议不。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不气馁 2022-09-09 01:33:14

解决了,把下载下来的完整的font-awesome文件夹放到static目录下,不要改变file structure。
另外,注意版本对应的语法,使用<i class="icon-github"></i>

你怎么敢 2022-09-09 01:33:14

我只是来mark一下,不是来回答问题的.
遇到font-awesome的less不生效的问题.解决如下
使用全局导入
:global{
@import "./font-awesome-4.7.0/less/font-awesome.less";
}
官方没有解释这个全局导入的差异.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文