我正在尝试使用 font-awesome 在我的网页中显示小图标。 我的元素基于 Flask 框架。
这是我的代码:
<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='custom.css')}}" type="text/css"/>
<link rel="stylesheet" href="{{url_for('static', filename = 'css/font-awesome.min.css')}}" type="text/css">
<a href="https://github.com/penguin-penpen" target="_blank"><i class="icon-github"></i> </a>
但是，图标没有出现。 我的静态文件结构是:
├── static
│ ├── css
│ ├── fonts
│ ├── images
│ ├── js
│ ├── less
│ └── scss
└── templates
我也测试过在浏览器中可以成功加载css文件，我的操作系统是OSX。
最佳答案
我猜有两个问题:
如果你想使用github图标，你应该使用:
<i class="fa fa-github"></i>
您可以在此处查看 font-awesome 上的 github 图标:fa-github
- 看起来你正在使用 font-awesome css，但是，你应该注意只有一个 css 文件是不够的，你应该将整个目录复制到
static文件夹如文档所述:
Copy the entire font-awesome directory into your project.
In the
<head>of your html, reference the location to your font-awesome.min.css.
您可以在这里找到它:Get Started - EASY: Default CSS
一个最小的例子:
app.py :
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
templates/index.html :
<!doctype html>
<html>
<head>
<title>Hello</title>
<link rel='stylesheet' href="{{ url_for('static', filename='font-awesome/css/font-awesome.min.css')}}">
</head>
<body>
<p><i class='fa fa-github'></i> Hello github</p>
<body>
</html>
static文件夹:
static
|_ font-awesome
|_ css
| |_ font-awesome.min.css
| |_...
|...
或者您可以只使用 CDN，这是使用 font-awesome 最简单的方法。
关于python - Font-awesome 在 Flask 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35115773/