我正在尝试使用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。
答案 0 :(得分:1)
这些是font-awesome的图标:Font Awesome icons
将您的HTML更改为:
<a href="https://github.com/penguin-penpen" target="_blank"><i class="fa fa-github"></i> </a>
答案 1 :(得分:1)
尝试使用:
<i class="fa fa-github"></i>
答案 2 :(得分:1)
我猜有两个问题:
如果你想使用github图标,你应该使用:
<i class="fa fa-github"></i>
您可以在这里查看字体很棒的github图标:fa-github
static
文档中的文件夹说:
将整个font-awesome目录复制到项目中。
- 醇>
在您的html的
<head>
中,将该位置引用到您的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的最简单方法。
答案 3 :(得分:0)
您必须编辑all.css(awesomefont)
更改
网址(../bla/bla)
至
url({{url_for(....)}}
并且不要忘记添加很棒的字体js(all.js)
答案 4 :(得分:0)
我遇到了同样的问题,发现的唯一解决方案是安装Flask-FontAwesome软件包。