{"id":5082,"date":"2022-02-14T00:05:39","date_gmt":"2022-02-14T00:05:39","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=5082"},"modified":"2024-03-22T02:06:25","modified_gmt":"2024-03-22T02:06:25","slug":"icon-list","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/14\/icon-list\/","title":{"rendered":"Icon List"},"content":{"rendered":"\n

With this element, you can show icon lists and also it is possible to make them as link.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

How to create Icon List Widget?<\/h4>\n\n\n\n

Step 1<\/strong>. Create, or choose the Column into which you want to add your element. Click on Add New Element.<\/p>\n\n\n\n

Step 2<\/strong>. Drag UDesign\u00a0Icon List <\/strong>from the element List.<\/p>\n\n\n\n

Step 3<\/strong>. Add icon items and set type as design with Type<\/strong> and Border Style<\/strong>.<\/p>\n\n\n\n

Icon List Content.<\/h4>\n\n\n\n

Text<\/strong> \u2013 You can type text of each list.<\/p>\n\n\n\n

Icon\u00a0<\/strong>\u2013 You can select icon in each list.<\/p>\n\n\n\n

Link<\/strong>\u00a0\u2013 Link of Icon list.<\/p>\n\n\n\n

Icon List Badge<\/h4>\n\n\n\n

Label <\/strong>– Input content of badge attached to proper icon list item<\/p>\n\n\n\n

Color <\/strong>– Color of badge content<\/p>\n\n\n\n

Background Color<\/strong> – Background color of badge content<\/p>\n\n\n\n

Icon List Options.<\/h4>\n\n\n\n

Layout <\/strong>– Determine arrange icon list in horizontal or vertical.<\/p>\n\n\n\n

Ordered List <\/strong>– Determine list type of icon list.<\/p>\n\n\n\n

Icon List Style.<\/h4>\n\n\n\n

In circle info styles, there are List, Icon, Text and Badge control options.<\/p>\n\n\n\n

List:<\/strong><\/p>\n\n\n\n

    \n
  • Space between: Space between Icon list items<\/li>\n\n\n\n
  • Horizontal Alignment: Set horizontal alignment of icon list item<\/li>\n\n\n\n
  • Vertical Alignment: Set vertical alignment of icon list item<\/li>\n\n\n\n
  • Divider: Determine show or not divider between icon list items<\/li>\n<\/ul>\n\n\n\n

    Icon:<\/strong><\/p>\n\n\n\n

      \n
    • Icon Size: Font size of icon of list item<\/li>\n\n\n\n
    • Line Height: Line height of icon of list item<\/li>\n\n\n\n
    • Background Size: Diameter of icon background in list item<\/li>\n\n\n\n
    • Color palette: Color palette of icon list item<\/li>\n\n\n\n
    • Border Style: border style of icon of list item<\/li>\n\n\n\n
    • Gap: Control the space between icon and text<\/li>\n<\/ul>\n\n\n\n

      Text:<\/strong><\/p>\n\n\n\n

        \n
      • Typography: Typography of icon list text<\/li>\n\n\n\n
      • Text shadow: text shadow of icon list text<\/li>\n\n\n\n
      • Color: Color of icon list text<\/li>\n<\/ul>\n\n\n\n

        Badge:<\/strong><\/p>\n\n\n\n

          \n
        • Typography: Typography of badge<\/li>\n\n\n\n
        • Vertical Position: Vertical position of icon list badge<\/li>\n\n\n\n
        • Horizontal Position: Horizontal position of icon list badge<\/li>\n\n\n\n
        • Padding: Padding of icon list badge<\/li>\n\n\n\n
        • Border Radius: Border radius of icon list badge<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

          With this element, you can show icon lists and also it is possible to make them as link. How to create Icon List Widget? Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element. Step 2. Drag UDesign\u00a0Icon List from the element List. Step 3. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-5082","post","type-post","status-publish","format-standard","hentry","category-udesign-elements"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=5082"}],"version-history":[{"count":1,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5082\/revisions"}],"predecessor-version":[{"id":9731,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5082\/revisions\/9731"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=5082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=5082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=5082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}