Python/Django
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.
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 |
Using Font Awesome Free with Django
Add the Font Awesome Free Requirement and App
Start by adding Font Awesome Free to your project’s requirements by placing this in your project’s requirements.txt file and replace version_number with the version of Font Awesome you are using.
fontawesomefree==version_numberNext, add Font Awesome Free to your Django installation by adding 'fontawesomefree' to the INSTALLED_APPS in your Django settings.py file.
INSTALLED_APPS = [ 'fontawesomefree' ]Link the Styles You Want (Recommended)
Link the core fontawesome.css file along with the CSS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to.
Here’s an example with the Solid and Brands styles using Web Fonts:
<head> <!-- Our project just needs Font Awesome Free's Solid and Brand files --> <!-- Link tags cause URI malformed error <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css"> --></head><body> <i class="fa-solid fa-user-chef"></i> <!-- uses solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --></body>Link the Styles You Want (Recommended)
Link the core fontawesome.css file along with the CSS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to.
Here’s an example with the Solid and Brands styles using Web Fonts:
<head> <!-- Our project just needs Font Awesome Free's Solid and Brand files --> <!-- Link tags cause URI malformed error <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css"> --></head><body> <i class="fa-solid fa-user-chef"></i> <!-- uses solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --></body>Or if you want to use SVGs, here’s that same example with the Solid and Brands styles using SVG+JS:
<head> <!-- Our project just needs Font Awesome Free's Solid and Brand files --> <!-- Script tags cause URI malformed error <script src="{% static 'fontawesomefree/js/fontawesome.js' %}"></script> <script src="{% static 'fontawesomefree/js/solid.js' %}"></script> <script src="{% static 'fontawesomefree/js/brands.js' %}"></script> --></head><body> <i class="fa-solid fa-user-chef"></i> <!-- uses solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --></body>Alternate Install: Using all.css or all.js
We have also provided a shortcut all.min.js or all.min.css file that includes all the Free icons as well as the core utility functions and styles. It’s a handy shortcut but isn’t as performant as selecting individual styles.
Here’s how you would use that with SVG+JS:
<head> <!-- One file includes all the Font Awesome Free icons and utilities --> <!-- <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script> --></head>...Or if you’d prefer to use our Web Font + CSS technology, add a <link> element like below:
<head> <!-- One file includes all the Font Awesome Free icons and utilities --> <!-- <link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css"> --></head>...Using Font Awesome Pro with Django
Access to the Pro package, which contains more icons and styles, requires you to have both an active subscription to a Pro Plan and a valid Pro Package Token. Don’t have a Pro plan? Get one today and Python on…
Add the Font Awesome Pro Requirement and App
Start by adding Font Awesome Pro to your project’s requirements by placing this in your project’s requirements.txt file and replace version_number with the version of Font Awesome you are using.
--extra-index-url https://dl.fontawesome.com/TOKEN/fontawesome-pro/python/simple/fontawesomepro==version_numberNext, add Font Awesome Pro to your Django installation by adding 'fontawesomepro' to the INSTALLED_APPS in your Django settings.py file.
INSTALLED_APPS = [ 'fontawesomepro' ]Link the Styles You Want (Recommended)
Link the core fontawesome.css file along with the CSS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to.
<head> <!-- Our project needs Font Awesome Pro's Classic Solid, Sharp Solid, Sharp Regular, and Brand files --> <!-- LINK tag problems <link href="{% static 'fontawesomepro/css/fontawesome.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomepro/css/solid.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomepro/css/sharp-solid.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomepro/css/sharp-regular.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'fontawesomepro/css/brands.css' %}" rel="stylesheet" type="text/css"> --></head><body> <i class="fa-solid fa-user-chef"></i> <!-- uses solid style --> <i class="fa-sharp fa-solid fa-alien"></i> <!-- uses sharp family's solid style --> <i class="fa-sharp fa-regular fa-plate-utensils"></i> <!-- uses sharp family's solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --></body>Or if you want to use SVGs, here’s that same example with the Solid and Brands styles using SVG+JS:
<head> <!-- Our project needs Font Awesome Pro's Classic Solid, Sharp Solid, Sharp Regular, and Brand files --> <!-- LINK tag problems <script src="{% static 'fontawesomepro/js/fontawesome.js' %}"></script> <script src="{% static 'fontawesomepro/js/solid.js' %}"></script> <script src="{% static 'fontawesomepro/js/sharp-solid.js' %}"></script> <script src="{% static 'fontawesomepro/js/sharp-regular.js' %}"></script> <script src="{% static 'fontawesomepro/js/brands.js' %}"></script> --></head><body> <i class="fa-solid fa-user-chef"></i> <!-- uses solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --> <i class="fa-sharp fa-regular fa-plate-utensils"></i> <!-- uses sharp family's solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --></body>Alternate Install: Using all.css or all.js
We have also provided a shortcut all.min.js or all.min.css file that includes ALL of the icons in Font Awesome as well as the core utility functions and styles. It’s a handy file if you’ll be using all the icon styles or testing out different styles as you develop your project. But if you’re using just a couple of styles, we don’t recommend it for production sites since loading all of the icons and files isn’t great for performance.
Here’s how you would use that with SVG+JS:
<head> <!-- One file includes all the Font Awesome Pro icons and utilities --> <!-- <script src="{% static 'fontawesomepro/js/all.min.js' %}"></script> --></head>...Or if you’d prefer to use our Web Font + CSS technology, add a <link> element like below:
<head> <!-- One file includes all the Font Awesome Pro icons and utilities --> <!-- <link href="{% static 'fontawesomepro/css/all.min.css' %}" rel="stylesheet" type="text/css"> --></head>...Next Steps
Pre-launch prep all complete and ready to blast off? After you get things installed, check out all of our icons and learn how to reference them in HTML.