{"id":1627,"date":"2024-03-28T15:36:40","date_gmt":"2024-03-28T15:36:40","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1627"},"modified":"2024-04-10T08:57:07","modified_gmt":"2024-04-10T08:57:07","slug":"icon-list","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/icon-list\/","title":{"rendered":"Icon List"},"content":{"rendered":"\n

The Icon List block allows you to create a list using different icons. It replaces the bullet and number list with different fontawesome icons.<\/p>\n\n\n\n

\"Add
Add Icon List Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Icon List Block, you\u2019ll get a block editing panel on the right-hand side. It has three options: General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • Orientation<\/strong> – It allows displaying the list of items horizontally or vertically.<\/li>\n\n\n\n
  • Gap Between Items <\/b>– It determines the space between each list of items.<\/li>\n<\/ul>\n\n\n\n
    \"Change
    Change Block Layout<\/figcaption><\/figure>\n\n\n\n

    Design<\/h3>\n\n\n\n
      \n
    • Preset<\/strong> – It refers to the predefined styles of the icons, which include Fill, Outline, etc.<\/li>\n<\/ul>\n\n\n\n
      \"Icon
      Icon List With Outline Preset Design<\/figcaption><\/figure>\n\n\n\n

      Icon <\/h3>\n\n\n\n
        \n
      • Icon<\/strong> – Choose the appropriate Icon on your end. You can choose the appropriate icons from the list available.<\/li>\n\n\n\n
      • Icon Position <\/strong>– It displays the icon before or after the label.<\/li>\n\n\n\n
      • Icon Size <\/strong>– It determines the size of the icon. <\/li>\n\n\n\n
      • Background Size<\/strong> – It determines the background size of the icon. <\/li>\n<\/ul>\n\n\n\n
        \"Customize
        Customize Icon<\/figcaption><\/figure>\n\n\n\n

        Label<\/h3>\n\n\n\n
          \n
        • Hide<\/strong> – Enabling the option hides the icon label.<\/li>\n\n\n\n
        • Gap<\/strong> – It determines the gap between the icon and the label.<\/li>\n<\/ul>\n\n\n\n
          \"Customize
          Customize Label Text<\/figcaption><\/figure>\n\n\n\n

          Style<\/h2>\n\n\n\n

          Properties<\/h3>\n\n\n\n
            \n
          • Alignment – <\/strong>It sets the block’s position to the Left, Center, and Right. Moreover, you can set the position to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
            \"Set
            Set Icon List Block to Center Alignment<\/figcaption><\/figure>\n\n\n\n

            Icon<\/h3>\n\n\n\n
              \n
            • Icon Alignment<\/strong> – It allows the icon position to be slightly above or aligned with the label.<\/li>\n\n\n\n
            • Color<\/strong> – It allows you to set up the color of the Icons in Normal and Hover Modes.<\/li>\n\n\n\n
            •  Background<\/strong> – It sets the background color for the icons. You can change the visual appearance of the background by changing its color. Moreover, you can set different colors for the background in the Normal <\/strong>and Hover<\/strong> modes.<\/li>\n<\/ul>\n\n\n\n
              \"Change
              Change Icon Alignment, Color and Background<\/figcaption><\/figure>\n\n\n\n

              Label<\/h3>\n\n\n\n
                \n
              • Color<\/strong> – It allows you to change the Label Text color.<\/li>\n\n\n\n
              • Typography\u00a0<\/strong>\u2013 It allows you to control the Label Text Typography, such as\u00a0font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties. The options are listed below:\n
                  \n
                • Font Family<\/strong> \u2013 The option allows you to choose the appropriate Font Family for the label text.<\/li>\n\n\n\n
                • Weight<\/strong> \u2013 It refers to the thickness or boldness of the label text.<\/li>\n\n\n\n
                • Size<\/strong> \u2013 It controls the font size of the label text.<\/li>\n\n\n\n
                • Line Height<\/strong> \u2013 It manages the space above and below the label text.<\/li>\n\n\n\n
                • Letter Spacing<\/strong> \u2013 It controls the amount of space between characters in the label text.<\/li>\n\n\n\n
                • Style<\/strong> \u2013 Using the property, you can set the post title to be Italic or Oblique.<\/li>\n\n\n\n
                • Transformation<\/strong> \u2013 It changes the case of the text, such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
                • Decoration <\/strong>\u2013 The styling is applied to the label text to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                  \"Change
                  Change Label Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

                  Border<\/h3>\n\n\n\n

                  It customizes the Border area added around the Icon and comes with the following options:<\/p>\n\n\n\n

                    \n
                  • Type<\/strong>\u00a0\u2013 You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add borders for icons. <\/li>\n<\/ul>\n\n\n\n

                    When you select none, you will be given the following option:<\/p>\n\n\n\n

                      \n
                    • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for the border.<\/li>\n<\/ul>\n\n\n\n

                      However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                        \n
                      • Border Color<\/strong> \u2013 It allows you to choose the appropriate color for the border.<\/li>\n\n\n\n
                      • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n

                        Note \u2013 You can apply the border settings option differently for Normal and Hover Modes.<\/em><\/p>\n\n\n\n

                        \"Add
                        Add Border Around Icon<\/figcaption><\/figure>\n\n\n\n

                        Advanced<\/h2>\n\n\n\n

                        The Advanced section consists of four options for the Icons List block.<\/p>\n\n\n\n

                        Spacing<\/h3>\n\n\n\n

                        Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                          \n
                        • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                        • Block Padding<\/strong> \u2013 According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different padding for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                          \"Manage
                          Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

                          Z-Index<\/h3>\n\n\n\n

                          It allows you to set the priority of the Icon List block according to the site requirement.<\/p>\n\n\n\n

                          Responsive Condition<\/h3>\n\n\n\n

                          Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                            \n
                          • Hide on Desktop<\/strong> \u2013 It hides the Icon List block on the Desktop.<\/li>\n\n\n\n
                          • Hide on Tablet<\/strong>\u00a0\u2013 It hides the Icon List block on the Tablet.<\/li>\n\n\n\n
                          • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Icon List block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                            \"Enable\/Disable
                            Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                            Advanced<\/h3>\n\n\n\n

                            Under the option, you can set the CSS ID and Classes for this particular Icon List block. The available options are listed below:<\/p>\n\n\n\n

                              \n
                            • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                            • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                              \"Add
                              Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                              After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                              The Icon List block allows you to create a list using different icons. It replaces the bullet and number list with different fontawesome icons. After you have chosen the Icon List Block, you\u2019ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1627"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1627"}],"version-history":[{"count":26,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1627\/revisions"}],"predecessor-version":[{"id":2775,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1627\/revisions\/2775"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1627"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1627"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}