{"id":34622,"date":"2019-09-12T10:30:41","date_gmt":"2019-09-12T10:30:41","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=demo&#038;p=34622"},"modified":"2019-09-12T10:31:09","modified_gmt":"2019-09-12T10:31:09","slug":"vector-icon","status":"publish","type":"demo","link":"https:\/\/getshortcodes.com\/demo\/extra-shortcodes\/vector-icon\/","title":{"rendered":"Vector Icon"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Color options<\/h2>\n\n\n<div class=\"block-demo block-demo-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#ff1259;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#ff1259;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> Light Gray &#038; Red <\/span><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#414141;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:32px;line-height:32px;background:#414141;color:#fff712;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> Dark Gray &#038; Yellow <\/span><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#12b7ff;margin:0px 20px 20px 0px\"><i class=\"sui sui-user\" style=\"font-size:32px;line-height:32px;background:#12b7ff;color:#ffffff;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> Blue &#038; White <\/span><\/span><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:&quot;#ff1259&quot;;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> Light Gray &amp; Red <\/span><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:&quot;#414141&quot;;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> Dark Gray &amp; Yellow <\/span><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:&quot;#12b7ff&quot;;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> Blue &amp; White <\/span><\/span><\/pre>\n\t<\/details>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Radius option<\/h2>\n\n\n<div class=\"block-demo block-demo-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:0px;padding:16px\"><\/i><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:10px;padding:16px\"><\/i><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:100px;padding:16px\"><\/i><\/span><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><\/span><\/pre>\n\t<\/details>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Size options<\/h2>\n\n\n<div class=\"block-demo block-demo-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:16px;line-height:16px;background:#eeeeee;color:#333333;border-radius:256px;padding:8px\"><\/i><span class=\"sue-icon-text\"> 16 <\/span><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:24px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:24px;line-height:24px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> 24 <\/span><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:32px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-star\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:24px\"><\/i><span class=\"sue-icon-text\"> 32 <\/span><\/span><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:0px;color:#333333;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> 16 <\/span><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:0px;color:#333333;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> 24 <\/span><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:0px;color:#333333;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> 32 <\/span><\/span><\/pre>\n\t<\/details>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Icon with link<\/h2>\n\n\n<div class=\"block-demo block-demo-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><a href=\"#\" class=\"sue-icon\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\" target=\"_blank\"><i class=\"sui sui-link\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> Clickable icon <\/span><\/a><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><a href=\"http:\/\/&quot;#&quot;\" class=\"sue-icon\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\" target=\"_quotblankquot\"><span class=\"sue-icon-text\"> Clickable icon <\/span><\/a><\/pre>\n\t<\/details>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Stacked horizontally<\/h2>\n\n\n<div class=\"block-demo block-demo-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> With text <\/span><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> With text <\/span><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><i class=\"sui sui-heart\" style=\"font-size:32px;line-height:32px;background:#eeeeee;color:#333333;border-radius:256px;padding:16px\"><\/i><span class=\"sue-icon-text\"> With text <\/span><\/span><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> With text <\/span><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> With text <\/span><\/span> <span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#333333;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> With text <\/span><\/span><\/pre>\n\t<\/details>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Social icons<\/h2>\n\n\n<div class=\"block-demo block-demo-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#3b5998;margin:0px 20px 20px 0px\"><i class=\"sui sui-facebook\" style=\"font-size:16px;line-height:16px;background:#3b5998;color:#ffffff;border-radius:4px;padding:8px\"><\/i><span class=\"sue-icon-text\"> Facebook <\/span><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#1da1f2;margin:0px 20px 20px 0px\"><i class=\"sui sui-twitter\" style=\"font-size:16px;line-height:16px;background:#1da1f2;color:#ffffff;border-radius:4px;padding:8px\"><\/i><span class=\"sue-icon-text\"> Twitter <\/span><\/span><\/p>\n<p><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:#e1306c;margin:0px 20px 20px 0px\"><i class=\"sui sui-instagram\" style=\"font-size:16px;line-height:16px;background:#e1306c;color:#ffffff;border-radius:4px;padding:8px\"><\/i><span class=\"sue-icon-text\"> Instagram <\/span><\/span><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:&quot;#3b5998&quot;;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> Facebook <\/span><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:&quot;#1da1f2&quot;;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> Twitter <\/span><\/span>\n\n<span class=\"sue-icon sue-icon-no-url\" style=\"font-size:16px;color:&quot;#e1306c&quot;;margin:0px 20px 20px 0px\"><span class=\"sue-icon-text\"> Instagram <\/span><\/span><\/pre>\n\t<\/details>\n<\/div>\n","protected":false},"featured_media":0,"parent":34612,"menu_order":10,"template":"","class_list":["post-34622","demo","type-demo","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo\/34622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/demo"}],"up":[{"embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo\/34612"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=34622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}