Usage#

Configuration#

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. When set to `True`, the appropriate resource(s) will be downloaded from the CDN once, after which they will be served locally.

Initialization#

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

Loading Resources#

Font-Awesome-Flask provides three helper methods to load Font Awesome’s resources: load(), load_js() and 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() to load either, but which defaults to SVG + JS.

Whichever resource(s) you end up using, you can load them by simply including any of the methods mentioned above in the head of your base template:

<head>
    ...
    {{ font_awesome.load_js() }}
    ...
</head>
<body>
    ...
</body>

By default, this will load all icon styles of the latest available version in minified form from the CDN. You can change this default behaviour by specifying options such as version or style. Please refer to the API Reference for a complete list of all available options.

Rendering Icons#

Font-Awesome-Flask provides two methods to render icons: render_icon() to render a single icon, and render_stacked_icon() to render a stacked icon. You can simply include these in your Jinja template like so:

{{ font_awesome.render_icon("fas fa-house") }}
{{ font_awesome.render_stacked_icon("fas fa-square", "fas fa-house") }}

Both methods offer an exhaustive set of options to customize their styling. See the API Reference for more details.