XQA
Back to Python
2026-02-155 min read

Sidebar with Icons (Python Programming)

Learn Sidebar with Icons (Python Programming) step by step with clear examples and exercises.

Title: Sidebar with Icons (Python Programming)

Why This Matters

Sidebars are a crucial UI element in web design, often used to provide additional information or navigation options. You'll learn how to create a sidebar with icons using Python and HTML. This skill is essential for building dynamic and interactive websites.

A well-designed sidebar can improve the user experience by making it easier for users to navigate your website and find relevant content quickly. With a sidebar, you can organize your content in a clear and concise manner, making it more accessible to users.

Prerequisites

Before diving into the core concept, ensure you have a basic understanding of:

  1. HTML (HTML tags, structure, and attributes)
  2. CSS (Styles, classes, and IDs)
  3. Python (Basic syntax, functions, and modules)
  4. Bootstrap (A popular front-end framework for faster web development)
  5. Font Awesome (A library of icons used in web design)

Core Concept

To create a sidebar with icons, we will use HTML for the structure, CSS for styling, and Python to dynamically generate the content using the Flask micro-web framework.

Setting up the project

  1. Install Flask: pip install flask
  2. Create a new directory for your project and navigate into it: mkdir my_project && cd my_project
  3. Initialize a new Flask app: python -m flask --app my_app __init__.py
  4. Create the main application file (__init__.py) with the following content:
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
return render_template('index.html')

if __name__ == '__main__':
app.run(debug=True)
  1. Create the HTML template file (templates/index.html) with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar with Icons</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
</head>
<body>
<nav class="sidebar">
{% for icon, name in icons %}
<a href="#" class="sidebar-item">
<i class="{{ icon }}"></i>
{{ name }}
</a>
{% endfor %}
</nav>
<!-- Main content -->
</body>
</html>

In the above code, we have created a basic HTML structure with Bootstrap and Font Awesome for icons. We also defined a navigation bar (sidebar) using a for loop that will iterate over our icons and names.

Generating dynamic content

Now let's create some sample icons and their corresponding names to populate the sidebar:

In __init__.py

ICONS = [

('fas fa-home', 'Home'),

('fas fa-user', 'Profile'),

('fas fa-cog', 'Settings'),

Add more icons as needed

]


With the above code, we have defined a list of tuples containing icon classes (Font Awesome) and their corresponding names.

### Styling the sidebar

To style our sidebar, create a new CSS file (`static/styles.css`) with the following content:

/ Add your custom styles here /

body {

font-family: Arial, sans-serif;

}

.sidebar {

position: fixed;

top: 0;

left: 0;

width: 200px;

height: 100%;

background-color: #f5f5f5;

padding: 20px;

}

.sidebar a {

text-decoration: none;

color: #333;

}

.sidebar i {

margin-right: 10px;

}


In the above code, we have defined basic styles for our sidebar and its items. You can customize these styles as needed to match your design preferences.

### Running the app

To run the app, simply execute `python __init__.py` in your project directory's terminal. Open a web browser and navigate to `http://127.0.0.1:5000/`, where you should see your new sidebar with icons.

Worked Example

To further illustrate how to create a sidebar with icons, let's add more icons and customize the styles.

  1. Add more icons to the ICONS list in __init__.py.
  2. Modify the CSS file (static/styles.css) to change the colors, font size, or any other aspect of the sidebar's appearance.
  3. Restart the app and observe the changes in your browser.

Common Mistakes

  1. Forgetting to include the Bootstrap CSS link in the HTML template (index.html)
  2. Not defining the ICONS list in the main application file (__init__.py)
  3. Failing to close the for loop correctly in the HTML template
  4. Incorrectly specifying the icon classes or names in the ICONS list
  5. Forgetting to import Flask and render templates in the main application file (__init__.py)
  6. Not linking Font Awesome CSS in the HTML template
  7. Failing to close the font awesome CDN link tag in the HTML template
  8. Incorrectly defining styles in the CSS file, such as missing semicolons or invalid selectors

Practice Questions

  1. Add a new icon and its corresponding name to the sidebar.
  2. Change the color scheme of the sidebar by modifying the CSS file.
  3. Create a dropdown menu for the icons in the sidebar using Bootstrap.
  4. Implement a search function that filters the sidebar items based on user input.
  5. Add hover effects to the sidebar icons to make them more interactive.
  6. Style the main content area to better complement the sidebar design.
  7. Create a responsive design for the sidebar, ensuring it adapts to different screen sizes.
  8. Implement a function that dynamically updates the sidebar based on user actions or data fetched from an API.

FAQ

What is Flask, and why are we using it?

Flask is a lightweight web framework for Python, allowing us to create dynamic websites easily. In this tutorial, we used Flask to generate the HTML content dynamically.

Where can I find more Font Awesome icons to use in my sidebar?

You can explore the complete list of Font Awesome icons at .

How can I customize the styles of my sidebar further?

You can modify the CSS file (static/styles.css) to change various aspects of your sidebar's appearance, such as colors, font sizes, and spacing.

Why do we need to include both Bootstrap and Font Awesome CSS in our HTML template?

Bootstrap provides a foundation for the layout and styling of our web page, while Font Awesome offers a library of icons that we can use in our design. By combining these two resources, we create a more visually appealing and functional sidebar.

How can I make my sidebar responsive?

To make your sidebar responsive, you can use media queries in your CSS file to adjust the styles based on the screen size. For example, you may want to hide the sidebar on smaller screens or change its width to better fit the available space.

Sidebar with Icons (Python Programming) | Python | XQA Learn