I tried to put margin to separate text and icon using this code
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/styles.css'%}">
<!-- <link href="{% static 'css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="{% static '/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> -->
<link href="{% static 'css/bootstrap.min.css'%}" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
<title>Document</title>
</head>
<body>
<div class="sidebar">
<header>Menu</header>
<a href="#" class="active"><i class="fas fa-qrcode"></i><span>Dashboard</span></a>
<a href="#"><i class="fas fa-link"></i><span>Data Entry</span></a>
<a href="#"><i class="fas fa-stream"></i><span>List</span></a>
</div>
</body>
</html>
CSS code
a.active,a:hover{
border-left: 5px solid #019321;
color: #bfeb74;
}
.sidebar a i{
margin-right: 300px;
It should look like this. Same code that put in codepen.io. enter image description here
>Solution :
Please add padding to the span.
span { padding-left: 20px; }