{"id":1617,"date":"2024-04-08T04:36:01","date_gmt":"2024-04-08T04:36:01","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1617"},"modified":"2024-04-10T08:58:37","modified_gmt":"2024-04-10T08:58:37","slug":"icon","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/icon\/","title":{"rendered":"Icon"},"content":{"rendered":"\n

The Icon Block allows you to add SVG icons to pages and posts. It comes with a WordPress icon library with 290+ SVG icons to choose from.<\/p>\n\n\n\n

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

After you have chosen the Icon 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
  • Min Height<\/strong> – It determines the minimum height of the icon. <\/li>\n<\/ul>\n\n\n\n
    \"Set
    Set the Height of the Block<\/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 Color <\/strong>– It allows you to choose the appropriate color for the icons added.<\/li>\n\n\n\n
    • Icon Size<\/strong> – It determines the size of the social icon. <\/li>\n\n\n\n
    • Icon Opacity<\/strong> – It determines the transparency level of an icon and is represented as a value between 0 and 1. When the value is set to 0, it’s completely transparent (invisible); if it is set to 1, it’s completely opaque (fully visible).<\/li>\n\n\n\n
    • Icon Rotation <\/strong>– It rotates the icon around its center point. <\/li>\n\n\n\n
    • URL – <\/strong>The option allows you to add a link redirecting the user to a specified web address or page when they click the icon.<\/li>\n<\/ul>\n\n\n\n

      Moreover, enabling the Open Link in a New Tab option will open the URL in a new tab.<\/p>\n\n\n\n

      \"Customize
      Customize Icon<\/figcaption><\/figure>\n\n\n\n

      Design<\/h3>\n\n\n\n
        \n
      • Preset<\/strong> – It refers to the predefined styles of the icons that includes Fill, Outine, Rectangular Fill etc.<\/li>\n<\/ul>\n\n\n\n
        \"Icon
        Icon With Rectangular Filled Preset Design<\/figcaption><\/figure>\n\n\n\n

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

        It provides the following styling options for the Icon Block. These are listed below:<\/p>\n\n\n\n

        Properties<\/h3>\n\n\n\n
          \n
        • Horizontal Alignment<\/strong> – It sets the block\u2019s position to the Left, Center, and Right Horizontally.<\/li>\n\n\n\n
        • Vertical Alignment<\/strong> – It sets the block\u2019s position vertically to the top, center, and button.<\/li>\n<\/ul>\n\n\n\n
          \"Set
          Set Icon Alignment<\/figcaption><\/figure>\n\n\n\n

          Icon<\/h3>\n\n\n\n
            \n
          • Background<\/strong> – It sets the background color of the Icon You can change the background\u2019s visual appearance by changing its color or adding an image.<\/li>\n<\/ul>\n\n\n\n
            \"Change
            Change Background Color<\/figcaption><\/figure>\n\n\n\n

            Icon Shape<\/h3>\n\n\n\n
              \n
            • Shape Color<\/strong> – It allows adding the background color to the icon.<\/li>\n\n\n\n
            • Shape Border Radius<\/strong> –\u00a0It allows you to set the radius value to make the round corners for the border.<\/li>\n\n\n\n
            • Shape Padding <\/strong>– It sets the icon shape padding value.<\/li>\n\n\n\n
            • Shape Outer Width <\/strong>– It sets the outer shape width.<\/li>\n\n\n\n
            • Shape Outline Color<\/strong> – It sets the color of the outline.<\/li>\n<\/ul>\n\n\n\n
              \"Customize
              Customize Icon Shape Styling<\/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
                    \"Add
                    Add and Customize Border<\/figcaption><\/figure>\n\n\n\n
                      \n
                    • Box Shadow<\/strong> \u2013 When you enable the Box Shadow option, you will get the following customization options:\n
                        \n
                      • Color<\/strong> \u2013 It allows you to select the appropriate box-shadow color for the icon.<\/li>\n\n\n\n
                      • Horizontal-X<\/strong> \u2013 It displays the box shadows in the horizontal position.<\/li>\n\n\n\n
                      • Horizontal-Y<\/strong> \u2013 It displays the box shadows in the vertical position.<\/li>\n\n\n\n
                      • Blur<\/strong> \u2013 You can set up the blur value of the box shadows appearing.<\/li>\n\n\n\n
                      • Spread<\/strong> \u2013 The shadow\u2019s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site\u2019s requirements.<\/li>\n\n\n\n
                      • Position<\/strong> \u2013 You can set the position of the box shadows as Inset<\/strong> or Outline<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                        \"Add
                        Add and Customize Box Shadow<\/figcaption><\/figure>\n\n\n\n

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

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

                        The Advanced section consists of four customization options for the Icon 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> \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 different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                        • Block Padding \u2013\u00a0<\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like\u00a0px, em, %, and rem. Moreover, you can set different padding values 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 block according to the site’s requirements.<\/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 block on the Desktop.<\/li>\n\n\n\n
                          • Hide on Tablet<\/strong> \u2013 It hides the Icon block on the Tablet.<\/li>\n\n\n\n
                          • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Icon 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 the Icon 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 Block allows you to add SVG icons to pages and posts. It comes with a WordPress icon library with 290+ SVG icons to choose from. After you have chosen the Icon 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[…]<\/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\/1617"}],"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=1617"}],"version-history":[{"count":26,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1617\/revisions"}],"predecessor-version":[{"id":2777,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1617\/revisions\/2777"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1617"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1617"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}