Question

我正在尝试使用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。

Answer 1

这些是font-awesome的图标：Font Awesome icons

将您的HTML更改为：

<a href="https://github.com/penguin-penpen" target="_blank"><i class="fa fa-github"></i> </a>

Answer 2

尝试使用：

<i class="fa fa-github"></i>

Answer 3

我猜有两个问题：

如果你想使用github图标，你应该使用：
```
<i class="fa fa-github"></i>
```

您可以在这里查看字体很棒的github图标：fa-github

您似乎正在使用字体真棒css，但是，您应该注意只有一个css文件是不够的，您应该将整个目录复制到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的最简单方法。

Answer 4

您必须编辑all.css（awesomefont）更改
网址（../bla/bla）至 url（{{url_for（....）}} 并且不要忘记添加很棒的字体js（all.js）

Answer 5

我遇到了同样的问题，发现的唯一解决方案是安装Flask-FontAwesome软件包。

Font-awesome在Flask中不起作用？

5 个答案: