Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 24, 2025 at 3:46 pm #1480052
    AnnemarieDoolin

    Hej Brilliant Team, I have a set of 5 star icons and I want to centre them together. If I set each icon to center align then they all stack vertically. If I set them to left align they group but of course they aren’t centred. For the moment, I’ve had to create them as an image for the client to see a demo but ideally I want to be able to do this without him having to rely on me creating images if he changes the content.

    ………………………………………………………………………………
    Here is the text for the five icons:

    [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='30px' position='center' color='#ffffff' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='30px' position='center' color='#ffffff' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='30px' position='center' color='#ffffff' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='30px' position='center' color='#ffffff' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='30px' position='center' color='#ffffff' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_font_icon]
    ………………………………………………………………………………….

    Would appreciate your help guys.
    Regards,
    Annemarie

    March 24, 2025 at 7:34 pm #1480067
    Rikard

    Hey Annemarie,

    Please try wrapping each one of them in a span tag:

    <span>Icon goes here</span>

    If you need further help then please create a test page and link to it so that we can see the results that you are getting.

    Best regards,
    Rikard

    March 25, 2025 at 2:38 am #1480077
    Guenni007

    use your code but wrap it by a column. That column got custom class – f.e. center-stars
    – let them float left or center – not so important because positioning is part of flexbox layout:

    /* === put those icons inside a column - custom class is here :  center-stars === */

#top .flex_column.center-stars {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 10px;
}

#top .flex_column.center-stars:before,
#top .flex_column.center-stars:after {
  display: none;
}

    see result (and code) on: https://webers-testseite.de/mie/
    pay attention to the comments in the css ruleset on my site.

    March 25, 2025 at 3:15 am #1480078
    Guenni007

    or use those icons inside a text-block element: see example page at the bottom.

    [av_textblock fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' textblock_styling_align='' textblock_styling='' textblock_styling_gap='' textblock_styling_mobile='' size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' id='' custom_class='center-stars' template_class='' element_template='' one_element_template='' av_uid='av-psa03l' sc_version='1.0' admin_preview_bg='']
[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-8z2voh' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-27dcl9d' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-1kvehwh' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-4al7hd' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-n9hech' sc_version='1.0' admin_preview_bg=''][/av_font_icon]
[/av_textblock]
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.