Icon list - building text list with icon - wordpress Gutenberg block

Icon list block - output a text list menu with icons

The icon list block can produce several commonly used text or icon list contents, which can usually be attached to the navigation block template or the bottom content of the website.

The following three forms of lists can be made using the icon list block:

You can see the first block in the figure above. This is the contact method made by using the title+different icons. The contact address, phone number, email address, etc. are output

The second and third blocks are the icon+text link mode, which can output the text link content we want.

The fourth block is the pure icon mode. When the mouse passes the icon, text will pop up, and hyperlinks can be set to output the icons of social media and payment support.

We can see the bottom of the English version through the figure below. In fact, it is also made using the icon list block. Icons can use different icons or completely consistent icons.

Instructions for use of icon list block

Insert an icon list, find the icon list in the block library of wordpress Gutenberg editor, click Insert, and the effect after inserting is as follows:

The inserted status is that there is only one line of list without title. You can expand the number of lists in the block settings on the right, increase the corresponding number, and set the title as follows:

After entering the title and adding a certain amount of list content, you can see that there are more options to control the content on the right

Now you can set the contents, icons and styles of the list, as follows:

It can be seen that we have set the icon and color of the first column. If a group of lists share a common icon, then the others only need to set text. The following content will automatically inherit the first icon

Other icons can also be set, and the icons set separately will be displayed separately.

If you have enabled the label mode, that is, the single display icon mode, you should select the text color to control the background color of the icon:

In this way, we can get different forms of icon list content. Modification and creation are relatively simple. The style and style of blocks are also very flexible, and font size and color can be set.