Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 23, 2024 at 2:04 pm #1445355
    Sandy

    How can the gridrow content text be vertically centred to the icon?

    How can the icon be larger?

    How can a different set of icons be easily used?

    May 24, 2024 at 6:03 am #1445461
    Ismael

    Hey Tanja,

    Thank you for the inquiry.

    1.) Try to set the Styling > General Styling > IconBox Styling to the last option (Display icon above title).

    2.) To increase the font size, go to the Styling > Font Sizes panel, then adjust the element settings accordingly.

    3.) You can upload monocolored fonts from fontello or flaticon using the Iconfont Manager. Please check the documentation below for more info: https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-

    Best regards,
    Ismael

    May 24, 2024 at 1:59 pm #1445526
    Sandy

    Thank you!

    1 – I’m looking for vertically centred icon to content text. Changing to ‘display icon above title’ horizontally centres them instead.

    2 – The Styling > Font Sizes panel has two font sizing options: title text and content text. There is no icon size option.

    3 – Great info, thanks.

    May 24, 2024 at 2:43 pm #1445538
    Sandy

    Additional note:

    1 – On mobile, for example, the first and second line of content text run to the right of the icon, while the third line of content text runs underneath the icon. How can all lines be set to line up evenly to the right of the icon always?

    May 25, 2024 at 6:18 pm #1446042
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field, it will make the icon larger and center vertically:

    .iconbox_left .iconbox_content {  
	display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  grid-auto-columns: auto 1fr;
  gap: 0px 0px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}
.iconbox_left .iconbox_content .entry-content-header .iconbox_icon {
    height: 60px;
    width: 60px;
    font-size: 40px;
    top: 0;
    left: 0;
    align-content: center;
}
.iconbox_left .iconbox_content .entry-content-header {
  justify-self: center;
}
.iconbox_left .iconbox_content .iconbox_content_container p {
	margin-top: 0;
}

    Best regards,
    Mike

    May 26, 2024 at 7:34 pm #1446526
    Sandy

    Thank you!

    May 26, 2024 at 7:49 pm #1446538
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How can the gridrow content text be vertically centred to the icon?’ is closed to new replies.