Font Awesome now has an official Django plugin that's available via the Python package installer, pip, for a friction-less way to use our icons in your Django projects.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
We found an issue with the way we named our Version 5 python packages. This has been fixed in Version 6, but it meant creating new Free and Pro packages with a different name scheme - fontawesomefree and fontawesomepro.
What's installed
Let's cover the basics of the directories and files you’ll need for both Font Awesome Free and Pro. Once installed, both the Free and Pro web-focused Font Awesome packages contain the following directories and files:
Path
What It Is
Where You Should Start
/css
Stylesheets for Web Fonts
all.css
/js
SVG with JavaScript
all.js
/less
Less pre-processor
fontawesome.less
/scss
Sass pre-processor
fontawesome.scss
/sprites
SVG sprites
solid.svg
/svgs
Individual SVG for each icon
individual *.svg icons
/webfonts
Web Font files used with CSS
See /css
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
We recommend using requirements files(opens new window) in your Python projects to install the Font Awesome package. The docs below assume that you're working this way.
Using Font Awesome Free with Django
Start by adding Font Awesome Free to your project's requirements by placing this in your project's requirements.txt file(opens new window) and replace version_number with the version of Font Awesome you are using.
fontawesomefree==version_number
Next, add Font Awesome Free to your Django installation by adding 'fontawesomefree' to the INSTALLED_APPS(opens new window) in your Django settings.py file.
INSTALLED_APPS =['fontawesomefree']
Then, reference the installed files in the <head> section of your base template if you want to use Font Awesome in your entire project or in the <head> section of any individual files where you want to use Font Awesome.
<head><!-- reference your installed Font Awesome Free package's files here --><scriptsrc="{% static 'fontawesomefree/js/all.min.js' %}"></script></head>
...
If you'd prefer to use our Web Font + CSS technology, add a <link> element like below:
<head><!-- reference your installed Font Awesome Free package's files here --><linkhref="{% static 'fontawesomefree/css/all.min.css' %}"rel="stylesheet"type="text/css"></head>
...
Want just certain styles of icons? -- If you would like only to use specific styles rather than the default all option we've included in our Web Fonts and SVG technology, reference the specific style files you want to use like fa-brands or fa-regular and then the loader fontawesome file in place of all.
Grab your super-secret npm token from your account and don't share it with anyone who shouldn't have it. We'll wait here...
Start by adding Font Awesome Pro to your project's requirements by placing this in your project's requirements.txt file(opens new window) and replace version_number with the version of Font Awesome you are using.
Next, add Font Awesome Pro to your Django installation by adding 'fontawesomepro' to the INSTALLED_APPS(opens new window) in your Django settings.py file.
INSTALLED_APPS =['fontawesomepro']
Then, reference the installed files in the <head> section of your base template if you want to use Font Awesome in your entire project or in the <head> section of any individual files where you want to use Font Awesome.
<head><!-- reference your installed Font Awesome Pro package's files here --><scriptsrc="{% static 'fontawesomepro/js/all.min.js' %}"></script></head>
If you'd prefer to use our Web Font + CSS technology, add a <link> element like below:
<head><!-- reference your installed Font Awesome Pro package's files here --><linkhref="{% static 'fontawesomepro/css/all.min.css' %}"rel="stylesheet"type="text/css"></head>
Want just certain styles of icons? -- If you would like only to use specific styles rather than the default all option we've included in our Web Fonts and SVG technology, reference the specific style files you want to use like fa-brands or fa-regular and then the loader fontawesome file in place of all.