{"id":297,"date":"2014-05-24T06:31:20","date_gmt":"2014-05-24T11:31:20","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=297"},"modified":"2014-05-24T06:31:20","modified_gmt":"2014-05-24T11:31:20","slug":"icon-list","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/integrity-1\/shortcodes\/icon-list\/","title":{"rendered":"Icon List"},"content":{"rendered":"<p>You can take any of the over 350 included icons and use them to create engaging lists using the Icon List shortcode. Because these are icon fonts, they will look pixel perfect no matter what size you make them.<\/p>\n<ul class=\"x-ul-icons\" style=\"margin-bottom:0;\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-arrow-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf061;\"  ><\/i>This&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-bullseye\" aria-hidden=\"true\" data-x-icon-s=\"&#xf140;\"  ><\/i>&#8230;is&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-play-circle\" aria-hidden=\"true\" data-x-icon-s=\"&#xf144;\"  ><\/i>&#8230;a&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-eraser\" aria-hidden=\"true\" data-x-icon-s=\"&#xf12d;\"  ><\/i>&#8230;super&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-envelope\" aria-hidden=\"true\" data-x-icon-s=\"&#xf0e0;\"  ><\/i>&#8230;rad&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-meh-o\" aria-hidden=\"true\" data-x-icon-o=\"&#xf11a;\"  ><\/i>&#8230;icon&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-code\" aria-hidden=\"true\" data-x-icon-s=\"&#xf121;\"  ><\/i>&#8230;list!<\/li>\n<\/ul>\n<hr  class=\"x-hr\" >\n<ul class=\"x-ul-icons\" style=\"font-size:24px; margin-bottom:0;\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-arrow-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf061;\"  ><\/i>This&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-bullseye\" aria-hidden=\"true\" data-x-icon-s=\"&#xf140;\"  ><\/i>&#8230;is&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-play-circle\" aria-hidden=\"true\" data-x-icon-s=\"&#xf144;\"  ><\/i>&#8230;a&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-eraser\" aria-hidden=\"true\" data-x-icon-s=\"&#xf12d;\"  ><\/i>&#8230;super&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-envelope\" aria-hidden=\"true\" data-x-icon-s=\"&#xf0e0;\"  ><\/i>&#8230;rad&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-meh-o\" aria-hidden=\"true\" data-x-icon-o=\"&#xf11a;\"  ><\/i>&#8230;icon&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-code\" aria-hidden=\"true\" data-x-icon-s=\"&#xf121;\"  ><\/i>&#8230;list!<\/li>\n<\/ul>\n<hr  class=\"x-hr\" >\n<ul class=\"x-ul-icons\" style=\"font-size:64px; color:#ffba00; margin-bottom:0;\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-arrow-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf061;\"  ><\/i>This&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-bullseye\" aria-hidden=\"true\" data-x-icon-s=\"&#xf140;\"  ><\/i>&#8230;is&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-play-circle\" aria-hidden=\"true\" data-x-icon-s=\"&#xf144;\"  ><\/i>&#8230;a&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-eraser\" aria-hidden=\"true\" data-x-icon-s=\"&#xf12d;\"  ><\/i>&#8230;super&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-envelope\" aria-hidden=\"true\" data-x-icon-s=\"&#xf0e0;\"  ><\/i>&#8230;rad&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-meh-o\" aria-hidden=\"true\" data-x-icon-o=\"&#xf11a;\"  ><\/i>&#8230;icon&#8230;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-code\" aria-hidden=\"true\" data-x-icon-s=\"&#xf121;\"  ><\/i>&#8230;list!<\/li>\n<\/ul>\n<hr  class=\"x-hr\" >\n<ul class=\"x-ul-icons\" style=\"margin-bottom:0;\"  >\n<li class=\"x-li-icon\" style=\"color: green;\"  ><i class=\"x-icon-check\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00c;\"  ><\/i>Add inline styles if you want.<\/li>\n<li class=\"x-li-icon\" style=\"color: green;\"  ><i class=\"x-icon-check\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00c;\"  ><\/i>Select different icons for each list item.<\/li>\n<li class=\"x-li-icon\" style=\"color: red;\"  ><i class=\"x-icon-times\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00d;\"  ><\/i>The possibilities are endless!<\/li>\n<\/ul>\n<hr  class=\"x-hr\" >\n<ul class=\"x-ul-icons\" style=\"font-size:24px; margin-bottom:0;\"  >\n<li class=\"x-li-icon\" style=\"color: green;\"  ><i class=\"x-icon-check\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00c;\"  ><\/i>Add inline styles if you want.<\/li>\n<li class=\"x-li-icon\" style=\"color: green;\"  ><i class=\"x-icon-check\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00c;\"  ><\/i>Select different icons for each list item.<\/li>\n<li class=\"x-li-icon\" style=\"color: red;\"  ><i class=\"x-icon-times\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00d;\"  ><\/i>The possibilities are endless!<\/li>\n<\/ul>\n<hr  class=\"x-hr\" >\n<ul class=\"x-ul-icons\" style=\"font-size:34px; margin-bottom:0;\"  >\n<li class=\"x-li-icon\" style=\"color: green;\"  ><i class=\"x-icon-check\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00c;\"  ><\/i>Add inline styles if you want.<\/li>\n<li class=\"x-li-icon\" style=\"color: green;\"  ><i class=\"x-icon-check\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00c;\"  ><\/i>Select different icons for each list item.<\/li>\n<li class=\"x-li-icon\" style=\"color: red;\"  ><i class=\"x-icon-times\" aria-hidden=\"true\" data-x-icon-s=\"&#xf00d;\"  ><\/i>The possibilities are endless!<\/li>\n<\/ul>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[icon_list] [icon_list_item type=\"arrow-right\"]This is...[\/icon_list_item] [icon_list_item type=\"bullseye\"]...a super rad...[\/icon_list_item] [icon_list_item type=\"play-circle\"]...icon list![\/icon_list_item] [\/icon_list]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[icon_list style=\"font-size:24px;\"] [icon_list_item type=\"arrow-right\"]This is...[\/icon_list_item] [icon_list_item type=\"bullseye\"]...a super rad...[\/icon_list_item] [icon_list_item type=\"play-circle\"]...icon list![\/icon_list_item] [\/icon_list]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[icon_list style=\"font-size:64px; color:#ffba00; margin-bottom:0;\"] [icon_list_item type=\"arrow-right\"]This is...[\/icon_list_item] [icon_list_item type=\"bullseye\"]...a super rad...[\/icon_list_item] [icon_list_item type=\"play-circle\"]...icon list![\/icon_list_item] [\/icon_list]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[icon_list] [icon_list_item style=\"color: green;\" type=\"check\"]Add inline styles if you want.[\/icon_list_item] [icon_list_item style=\"color: green;\" type=\"check\"]Select different icons for each list item.[\/icon_list_item] [icon_list_item style=\"color: red;\" type=\"times\"]The possibilities are endless![\/icon_list_item] [\/icon_list]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[icon_list style=\"font-size:24px;\"] [icon_list_item style=\"color: green;\" type=\"check\"]Add inline styles if you want.[\/icon_list_item] [icon_list_item style=\"color: green;\" type=\"check\"]Select different icons for each list item.[\/icon_list_item] [icon_list_item style=\"color: red;\" type=\"times\"]The possibilities are endless![\/icon_list_item] [\/icon_list]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[icon_list style=\"font-size:64px;\"] [icon_list_item style=\"color: green;\" type=\"check\"]Add inline styles if you want.[\/icon_list_item] [icon_list_item style=\"color: green;\" type=\"check\"]Select different icons for each list item.[\/icon_list_item] [icon_list_item style=\"color: red;\" type=\"times\"]The possibilities are endless![\/icon_list_item] [\/icon_list]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Icon List Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<\/ul>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Icon List Item Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>type<\/strong>: enter in the unique identifier of the icon you want to use for your bullet.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can take any of the over 350 included icons and use them to create engaging lists using the Icon List shortcode. Because these are icon fonts, they will look pixel perfect no matter what size you make them.<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/297"}],"collection":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":0,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/297\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/media?parent=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}