/* === put those icons inside a column - custom class is here : center-stars === */
/* === to use the flexbox layout - the flex-items must be the only part of this column === */
#top .flex_column.center-stars {
display: flex;
flex-flow: row nowrap;
justify-content: center;
column-gap: 15px; /* === star distance === */
align-items: center; /* === vertical centering inside that column === */
}
/* ========= In this case, it does not seem necessary. ========= */
/* === However, they are often part of the flexbox layout and are then taken into account. === */
#top .flex_column.center-stars:before,
#top .flex_column.center-stars:after {
display: none;
}inside a text-block element
pay attention to have no line-breaks between those icon-shortcodes!
code depends on if p-tags then are generated or not – look to your DOM what is the matter.
/* === or place the icons inside a text-block element - custom class is here too : center-stars === */
/* === to use the flexbox layout - the flex-items must be the only part of this text-block element === */
#top .avia_textblock.center-stars p {
display: flex;
flex-flow: row nowrap;
justify-content: center;
column-gap: 15px;
align-items: center; /* === vertical centering inside that column === */
}
#top .avia_textblock.center-stars p:before,
#top .avia_textblock.center-stars p:after {
display: none;
}
