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.
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 |
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'
]
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 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 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>
all.css or all.jsWe 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>
...
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...
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.
--extra-index-url https://dl.fontawesome.com/TOKEN/fontawesome-pro/python/simple/
fontawesomepro==version_number
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'
]
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 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 -->
<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>
all.css or all.jsWe 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>
...
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.