I attempted to place margin to separate textual content and icon utilizing this code
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<hyperlink rel="stylesheet" href="{% static 'css/types.css'%}">
<!-- <hyperlink href="{% static 'css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="nameless">
<script src="{% static '/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="nameless"></script> -->
<hyperlink href="{% static 'css/bootstrap.min.css'%}" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="nameless">
<script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
<title>Doc</title>
</head>
<physique>
<div class="sidebar">
<header>Menu</header>
<a href="#" class="lively"><i class="fas fa-qrcode"></i><span>Dashboard</span></a>
<a href="#"><i class="fas fa-link"></i><span>Information Entry</span></a>
<a href="#"><i class="fas fa-stream"></i><span>Listing</span></a>
</div>
</physique>
</html>
CSS code
a.lively,a:hover{
border-left: 5px stable #019321;
shade: #bfeb74;
}
.sidebar a i{
margin-right: 300px;
enter picture description right here
It ought to appear to be this. Similar code that put in codepen.io. enter picture description right here
