Django: Adding icons to our project

How to utilize font awesome with Django templates.

Photo by Pankaj Patel on Unsplash

What are templates?

Django templates are text files, which can be composed to run as HTML files — which can later be referred to as HTML templates, once templating has been configured in Django.

.

.

.

Step 1:

(Example)

Create a basic index.html template file:

<!-- index.html --><html>   <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width">      <title> My first website </title>

</head>

<body>
<h1> Hello world </h1>
<p> My first icon </p>

</body>

</html>

Step 2:

Add the font awesome 4.7 CDN to your index.html file within the head tags:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- index.html --><html>   <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width">      <title> My first website </title>

<!-- font awesome 4.7 cdn -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>


<body>
<h1> Hello world </h1>
<p> My first icon </p>


</body>

</html>

Step 3:

Visit the following link and pick your icon:

https://fontawesome.com/v4/icons/

Step 4:

Once you have found an icon that you like, simply click on the icon… Scroll down and copy the icon based on it’s <i> tag.

Example:

Step 5:

Add your icon to your index.html file:

<!-- index.html --><html>   <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width">      <title> My first website </title>

<!-- font awesome 4.7 cdn -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>


<body>
<h1> Hello world </h1>
<p> My first icon </p>

<i class="fa fa-address-book" aria-hidden="true"></i>

</body>

</html>

A final note…

For those that are interested in learning Django from scratch, feel free to check out my latest course:

Python Django: Ultimate Beginners Course — 2022

Originally published at https://www.cloudwithdjango.com on August 27, 2022.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arno Pretorius

Arno Pretorius

127 Followers

Hi, I’m Arno… I love cloud computing and django web development and I want to share my knowledge and experiences with you.