Gutenberg, inline icon with text

  • Resolved Phil Huhn

    (@philhuhn)


    1 year, 7 months ago

    I’m looking for a way using the base Gutenberg features to place an icon on either side of text. Currently, Gutenberg has the Social Icons block. I’m using the 2023 theme. I want to stay away from Custom HTML code, because this will be maintained by non-technical people.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Go to Toggle block inserter > type icon in search > install an icon library ( icon by Nick Diego for say ) > back to Toggle block inserter > type row in search > take/drag row block > click the plus icon to Add block > select icon > icon library > choose icon > select Row block > click Add block (bottom right corner of the block) > select paragraph to type text > repeat adding a block to add another icon/text
    You can customize icon size, color, margin, padding, and space from the right side block panel.
    Not necessary but I’d recommend keeping the Document Overview panel open (shift + Alt + o ) on the left to get an overview of the stacking/grouping.

    Thread Starter Phil Huhn

    (@philhuhn)

    My requirements are using the base Gutenberg blocks, no installing plugins.

    In that case, the process is almost the same. The only difference is, without any plug-ins, add an image block to the Row block and upload the icon from your system/computer.

    Thread Starter Phil Huhn

    (@philhuhn)

    I completely forget about Row block, that will in general work. I does have a 24px margin. Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Gutenberg, inline icon with text’ is closed to new replies.

Tags