Skip to content
Say hello to Web Awesome, the biggest and best library of open-source web components.
Pre-order today!
You're viewing the Version 5 Docs. View the latest

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 with the the Font Awesome Package?

Once installed, the web-focused Font Awesome package contains the following directories and files:

PathWhat It IsWhere You Should Start
/cssStylesheets for Web Fontsall.css
/jsSVG with JavaScriptall.js
/lessLess pre-processorfontawesome.less
/scssSass pre-processorfontawesome.scss
/spritesSVG spritessolid.svg
/svgsIndividual SVG for each iconindividual *.svg icons
/webfontsWeb Font files used with CSSSee /css

Using the Free Version of Font Awesome

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.

INSTALLED_APPS = [
'fontawesome-free'
]

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 -->
<script src="{% static 'fontawesome_free/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 -->
<link href="{% static 'fontawesome_free/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.

<head>
<!-- Our project just needs Font Awesome Free's Solid + Brand files -->
<link href="{% static 'fontawesome_free/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesome_free/css/brands.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesome_free/css/solid.css' %}" rel="stylesheet" type="text/css">
</head>

Using the Pro version of Font Awesome for 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…

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.

Terminal window
--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 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 -->
<script src="{% 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 -->
<link href="{% 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.

<head>
<!-- Our project just needs Font Awesome Pro's Solid + Brand files -->
<link href="{% static 'fontawesomepro/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomepro/css/brands.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomepro/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>

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.