Classic alignment difficulties between two row elements in the html vs css - html

Question

Hello dear stack overflow citizens. I have a boring problem with two elements (watch code snippet below) but unfortunately, I ought to resolve it. I'll be grateful for any help or advice.
I need final result like this
In the circle with background: grey I positioned a relative social media links(.social__icon>img). I can’t load svg files from assets here. You can watch the screenshot with my embarrassing acts:
I don't have enough reputation to embed screenshots, I hope you can watch it somehow.
If not, it should look something like this:
social media link img margin left:12px socila media text-name also realative link img with hover and animation effects
They both needs to work like one in a row
Example
I'm facebook svg icon in the grey ellips 12px-left Facebook
Thats result with
.social__icon {
display: inline-flex; /* Changed */
align-items: center; /* Added */
enter image description here
Active mode:
enter image description here
ol,
ul,
li,
menu {
list-style: none;
}
a {
text-decoration: none;
}
.social__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.social__icon {
display: inline-block;
text-align: center;
width: 26px;
height: 26px;
border-radius: 100%;
background: rgba(196, 196, 196, 0.5);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.social__icon img {
vertical-align: middle;
}
.social__icon span {}
.social__icon:active {
background: #4B9200;
color: #4B9200;
}
.social__icon:hover {
animation: shake 500ms ease-in-out forwards;
}
#keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="social">
<ul class="social__list">
<li>
<a class="social__icon" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/fb.svg" alt="">
<span>Facebook</span>
</a>
</li>
<li>
<a class="social__icon" href="https://twitter.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/twtr.svg" alt="">
<span>Twitter</span>
</a>
</li>
<li>
<a class="social__icon" href="https://www.instagram.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/inst.svg" alt="">
<span>Instagram</span>
</a>
</li>
<li>
<a class="social__icon" href="https://www.youtube.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/youtube.svg" alt="">
<span>Youtube</span>
</a>
</li>
</ul>
</div>

Answer 1

Some style issues in the image
ol,
ul,
li,
menu {
list-style: none;
}
a {
text-decoration: none;
}
.social__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.social__icon {
display: inline-block;
text-align: center;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.social__icon img {
width: 26px;
height: 26px;
vertical-align: middle;
border-radius: 100%;
background: rgba(196, 196, 196, 0.5);
}
.social__icon:active {
background: #4b9200;
color: #4b9200;
}
.social__icon:hover {
animation: shake 500ms ease-in-out forwards;
}
#keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="social">
<ul class="social__list">
<li>
<a
class="social__icon"
href="https://en-gb.facebook.com"
target="_blank"
rel="noopener"
>
<img
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-512.png"
alt=""
/>
<span>Facebook</span>
</a>
</li>
<li>
<a
class="social__icon"
href="https://twitter.com"
target="_blank"
rel="noopener"
>
<img
src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png"
alt=""
/>
<span>Twitter</span>
</a>
</li>
<li>
<a
class="social__icon"
href="https://www.instagram.com"
target="_blank"
rel="noopener"
>
<img
src="https://cdn2.iconfinder.com/data/icons/social-media-applications/64/social_media_applications_3-instagram-512.png"
alt=""
/>
<span>Instagram</span>
</a>
</li>
<li>
<a
class="social__icon"
href="https://www.youtube.com"
target="_blank"
rel="noopener"
>
<img
src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/395_Youtube_logo-512.png"
alt=""
/>
<span>Youtube</span>
</a>
</li>
</ul>
</div>