Font-Awesome-Flask is an extension for Flask that adds support for Font Awesome to your web application. It adds methods to load Font Awesome's resources (both Web Fonts + CSS
and SVG + JS
are supported) and render icons.
Font-Awesome-Flask is available on PyPI. Install with pip
or your package manager of choice:
pip install Font-Awesome-Flask
If you'd like, you can also install Font-Awesome-Flask from source (with flit
):
git clone https://github.com/sgraaf/font-awesome-flask.git
cd font-awesome-flask
python3 -m pip install flit
flit install
Check out the Font-Awesome-Flask documentation for the User's Guide and API Reference.
Font-Awesome-Flask can be configured via the Flask configuration API, using the config
attribute of the Flask
object. These are the available configuration values along with their description:
Configuration value | Default | Description |
---|---|---|
FONT_AWESOME_SERVE_LOCAL |
False |
Whether to serve Font Awesome's resources locally or from the CDN. |
Initialize the extension with the Flask application normally...:
from flask import Flask
from flask_font_awesome import FontAwesome
app = Flask(__name__)
font_awesome = FontAwesome(app)
... or using the Application Factory pattern:
from flask import Flask
from flask_font_awesome import FontAwesome
font_awesome = FontAwesome()
def create_app():
app = Flask(__name__)
font_awesome.init_app(app)
return app
Font-Awesome-Flask provides three helper methods to load Font Awesome's resources: font_awesome.load()
, font_awesome.load_js()
and font_awesome.load_css()
.
Font Awesome can be used either via Web Fonts + CSS or via SVG + JS. Use the load_css()
method for the former, and load_js()
for the latter. You can also use the more general load()
, which defaults to SVG + JS
.
Whichever resource(s) you end up using, you can load them by including any of the load()
methods in the head of your base template:
<head>
...
{{ font_awesome.load_js() }}
...
</head>
<body>
...
</body>
Font-Awesome-Flask provides two ways of rendering icons: via the font_awesome.render_icon()
and font_awesome.render_stacked_icons()
methods...:
{{font_awesome.render_icon("fas fa-house")}}
{{font_awesome.render_stacked_icons("fas fa-square", "fas fa-house")}}
... or via the Jinja macros of the same names:
{% from 'font_awesome.html' import render_icon, render_stacked_icons %}
{{ render_icon('fas fa-house') }}
{{ render_stacked_icons('fas fa-square', 'fasfa-house') }}