Font-awesome doesn't work in Flask?

I'm trying to use font-awesome to show small icons in my web pages. My project is based on Flask framework.

Here is my code:

<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>

However, the icon does not appear. My static file structure is:

├── static
│   ├── css
│   ├── fonts
│   ├── images
│   ├── js
│   ├── less
│   └── scss
└── templates

I've also tested that in the browser the css file can be successfully loaded and my OS is OSX.

Solution

I guess there are two problems:

if you want to use the github icon, you should use:
```
 <i class="fa fa-github"></i>
```

You can check the github icon on font-awesome here: fa-github

it seems that you're using the font-awesome css, however, you should note that only one css file is not enough, you should copy the entire directory to the static folder as the documentation says:

Copy the entire font-awesome directory into your project.

In the <head> of your html, reference the location to your font-awesome.min.css.

you can find it here: Get Started - EASY: Default CSS

A minimal example:

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>

The static folder:

static
  |_ font-awesome
          |_ css
          |     |_  font-awesome.min.css
          |     |_...
          |...

Or you can just use the CDN, it's the easiest way to use font-awesome.