CODEWITHSUNDEEP
pythoncssflask
jinglei
jinglei

Reputation: 3363

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.

Upvotes: 1

Views: 11581

Answers (6)

Sylvain M
Sylvain M

Reputation: 1

you should use Flask-FontAwesome python package.

pip install Flask-FontAwesome

Applied to your example:

app.py :

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

Noticed :

this package uses FontAwesome version 4.

To use the latest version of FontAnsome, you must update the contents of the static directory of the Flask-FontAwesome package (use pip show Flask-FontAwesome to find its location) by replacing its contents with the latest versions, cf Download Font Awesome

Upvotes: 0

tmsss
tmsss

Reputation: 2129

I had the same problem and the only solution I've found was to install the Flask-FontAwesome package.

Upvotes: 0

Ridwan Muhammad
Ridwan Muhammad

Reputation: 1

you must edit your all.css (awesomefont) change the
url(../bla/bla) to url({{url_for(....)}} and dont forget to include awesome font js(all.js)

Upvotes: 0

lord63. j
lord63. j

Reputation: 4670

I guess there are two problems:

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

  1. 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:

  1. Copy the entire font-awesome directory into your project.

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

Upvotes: 2

Dan Gamble
Dan Gamble

Reputation: 4165

These are the icons for font-awesome: Font Awesome icons

Change your HTML to: 

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

Upvotes: 1

shrestha_aj
shrestha_aj

Reputation: 336

Try using: 

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

Upvotes: 1

Related Questions