Creating a CSS border around custom li bullet - html

Question

I'm trying to figure out if it's possible to incorporate a css border around an image I imported as a custom bullet for my li's:
ul {
list-style: none;
margin-right: 0;
padding-left: 0;
list-style-position: inside;
}
ul > li {
align-content: center;
display: flex;
margin: 5px 0;
padding-left: 1em;
text-indent: -1em;
}
ul li:before {
/* I'm a different image but found a similar
sized one online for demonstration
purposes seen below */
content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png");
border: 1px solid grey;
}
<ul>
<li>Get to know the business</li>
<li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
<li>Learn how the team's priorities impact our mission</li>
<li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>
The results in the embedded code editor mirror that of the image I'm using.
This is the desired output:
Any ideas? I'm thinking unfortunately I might have to import the icon with border, but am seeing if I can manage without.
Thanks!

Answer 1

Yes, it is quite easy to do, please take a look at the example below. You just mess up things a bit.
You have align-content instead of align-items that makes line positioning incorrect. text-indent results into incorrect offset. I've removed these small issues.
About image itself - I've used em as example because of emoji, but for image it will be better to use px and re-calculate values that are currently defined as em.
ul {
margin-right: 0;
padding-left: 0;
list-style: none;
}
ul > li {
align-items: center;
display: flex;
margin: 5px 0;
}
ul li:before {
/* I'm using the url method to fetch an icon, but
inserted a emoji for demonstration
purposes seen below */
/*content: url("path/to/icon");*/
content: '🚩';
border: 1px solid #808080;
border-radius: 100%;
width: 1em;
height: 1em;
display: inline-block;
padding: 0.25em;
line-height: 1.0;
margin-right: 0.5em;
}
<ul>
<li>Get to know the business</li>
<li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
<li>Learn how the team's priorities impact our mission</li>
<li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>

Answer 2

there are many ways to achieve result.
1) use image with rounded border as background on "li". background should be no-repeat left center and some padding-left on li.
2) give height, width, inline-block and border-radius to li:before.

Answer 3

You should remove "display:flex" from ul > li
ul {
list-style: none;
margin-right: 0;
padding-left: 0;
}
ul > li {
align-items: center;
display: flex;
margin: 5px 0;
}
ul li:before {
/* I'm using the url method to fetch an icon, but
inserted a emoji for demonstration
purposes seen below */
content: '🚩';
border: 1px solid #808080;
border-radius: 100%;
width: 1em;
height: 1em;
display: inline-block;
padding: 0.25em;
line-height: 1.0;
margin-right: 0.5em;
}