<div class="social-icons">
<ul class="social-icons__list">
<li class="social-icons__item social-icons__item--telegram">
<a class="social-icons__link" href="#">
<div class="social-icons__block">
<div class="social-icons__svg">
<svg>
<use xlink:href="/images/sprite.svg#vk"></use>
</svg>
</div>
<span>Text</span>
</div>
</a>
</li>
<li class="social-icons__item social-icons__item--telegram">
<a class="social-icons__link" href="#">
<div class="social-icons__block">
<div class="social-icons__svg">
<svg>
<use xlink:href="/images/sprite.svg#vk"></use>
</svg>
</div>
<span>Very long text</span>
</div>
</a>
</li>
<li class="social-icons__item">
<a class="social-icons__link" href="#">
<div class="social-icons__block">
<div class="social-icons__svg">
<svg>
<use xlink:href="/images/sprite.svg#vk"></use>
</svg>
</div>
<span></span>
</div>
</a>
</li>
<li class="social-icons__item">
<a class="social-icons__link" href="#">
<div class="social-icons__block">
<div class="social-icons__svg">
<svg>
<use xlink:href="/images/sprite.svg#vk"></use>
</svg>
</div>
<span></span>
</div>
</a>
</li>
<li class="social-icons__item">
<a class="social-icons__link" href="#">
<div class="social-icons__block">
<div class="social-icons__svg">
<svg>
<use xlink:href="/images/sprite.svg#vk"></use>
</svg>
</div>
<span></span>
</div>
</a>
</li>
<li class="social-icons__item">
<a class="social-icons__link" href="#">
<div class="social-icons__block">
<div class="social-icons__svg">
<svg>
<use xlink:href="/images/sprite.svg#vk"></use>
</svg>
</div>
<span></span>
</div>
</a>
</li>
</ul>
</div>
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-icons__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
row-gap: 0.5rem;
column-gap: 0.5rem;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.social-icons__item--telegram {
grid-column: span 3;
grid-row: span 2;
}
.social-icons__link {
display: flex;
color: #bf9595;
}
.social-icons__block {
display: flex;
align-items: center;
}
.social-icons__svg {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #bf9595;
margin-right: 5px;
transition: background-color 0.3s;
}
.social-icons__link svg {
width: 15px;
height: 15px;
fill: #fff;
stroke: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.