我正在尝试使用 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
static
将整个 font-awesome 目录复制到您的项目中。
在 html 的
中，引用 font-awesome.min.css 的位置。<head>
您可以在这里找到它：入门 - 简单：默认 CSS
一个最小的例子：
app.pyfrom 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>
staticstatic
|_ font-awesome
|_ css
| |_ font-awesome.min.css
| |_...
|...
或者您可以只使用 CDN，这是使用 font-awesome 最简单的方法。
尝试使用：
<i class="fa fa-github"></i>
这些是 font-awesome 的图标： Font Awesome 图标
将 HTML 更改为：
<a href="https://github.com/penguin-penpen" target="_blank"><i class="fa fa-github"></i> </a>
你必须编辑你的 all.css (awesomefont)
改变
网址(../bla/bla)
到
网址（{{url_for（....）}}
并且不要忘记包含很棒的字体 js(all.js)
我遇到了同样的问题，我找到的唯一解决方案是安装 Flask-FontAwesome 软件包。
你应该使用 Flask-FontAwesome python 包。
pip install Flask-FontAwesome
应用于您的示例：
app.pyfrom flask import Flask, render_template
from flask_fontawesome import FontAwesome
app = Flask(__name__)
FontAwesome(app)
@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>
{{ fontawesome_css() }}
</head>
<body>
<p><i class='fa fa-github'></i> Hello github</p>
{{ fontawesome_js() }}
<body>
</html>
注意到：
此软件包使用 FontAwesome 版本 4。
要使用最新版本的 FontAnsome，您必须更新 Flask-FontAwesome 包的
staticpip show Flask-FontAwesome