How to add Icons next to page links in a drop down folder

I am trying to find a code to add icons next to each page link in our drop down menus. Its going to require 16 different icons. Is there a way to accomplish this? I would like each icon to be on the left side of the link. Screenshot included to show where I want them. 

@tuanphan can you help with this? 

Website is solstice-global.com

Use this CSS code. Repeat Similar for other items

div.header-nav-item div div a:before {
    background-size: contain;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}
div.header-nav-item:nth-child(1)>div>div:nth-child(1) a:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2023/08/11/06/12/boy-8182923_1280.jpg);
}
div.header-nav-item:nth-child(1)>div>div:nth-child(2) a:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2023/09/17/10/17/milky-way-8258264_1280.jpg);
}
div.header-nav-item:nth-child(1)>div>div:nth-child(3) a:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2023/09/30/05/06/mallard-8284909_1280.jpg);
}

@tuanphan

Thank you! That worked to add the url images you included but it wont allow me to change it for some reason. I'm trying to just remove the url and add a code for the icon. 

example for the Supply Chain consulting would be : <i class="fa-thin fa-user-headset" style="color: #ffffff;"></i>

would I need to enter that in a different area of the code? 

#1. Which exact code did you add?

#2. With your code, it is FontAwesome code so you will need to declare corresponding FontAwesome Library first