Flask中font-awesome无效?
学习用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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
解决了,把下载下来的完整的font-awesome文件夹放到static目录下,不要改变file structure。
另外,注意版本对应的语法,使用
<i class="icon-github"></i>
我只是来mark一下,不是来回答问题的.
遇到font-awesome的less不生效的问题.解决如下
使用全局导入
:global{
@import "./font-awesome-4.7.0/less/font-awesome.less";
}
官方没有解释这个全局导入的差异.