{"id":442,"date":"2021-02-10T13:02:48","date_gmt":"2021-02-10T13:02:48","guid":{"rendered":"https:\/\/stable.visual-framework.dev\/wordpress\/?page_id=442"},"modified":"2022-08-04T10:42:39","modified_gmt":"2022-08-04T10:42:39","slug":"social-media-icons-block","status":"publish","type":"page","link":"https:\/\/stable.visual-framework.dev\/wordpress\/blocks\/social-media-icons-block\/","title":{"rendered":"Social media icons"},"content":{"rendered":"\n<div class=\"vf-grid | vf-grid__col-3\"><div class=\"vf-grid__col--span-2\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<ol><li>In WordPress editor click on a + icon to add a new block.<\/li><li>In the search field, start typing\u00a0<em>social media icons<\/em>\u00a0and select the respective block.<\/li><li>Add heading in the block settings on the right (i.e. &#8216;Follow us&#8217;).<\/li><li>Check the boxes for the desired icons.<\/li><li>Paste the URLs to your social media accounts in the respective fields<\/li><\/ol>\n\n\n\n<figure class=\"vf-figure wp-block-video\"><video style=\"max-width: 100%;\" controls src=\"https:\/\/stable.visual-framework.dev\/wordpress\/wp-content\/uploads\/2021\/02\/social.mp4\"><\/video><\/figure>\n\n<\/div>\n<\/div>\n\n\n<div><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<svg aria-hidden=\"true\" display=\"none\" class=\"vf-icon-collection vf-icon-collection--social\">\n  <defs>\n    <g id=\"vf-social--linkedin\">\n      <rect xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"5\" height=\"14\" x=\"2\" y=\"8.5\" rx=\".5\" ry=\".5\" \/>\n      <ellipse xmlns=\"http:\/\/www.w3.org\/2000\/svg\" cx=\"4.48\" cy=\"4\" rx=\"2.48\" ry=\"2.5\" \/>\n      <path xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n        d=\"M18.5,22.5h3A.5.5,0,0,0,22,22V13.6C22,9.83,19.87,8,16.89,8a4.21,4.21,0,0,0-3.17,1.27A.41.41,0,0,1,13,9a.5.5,0,0,0-.5-.5h-3A.5.5,0,0,0,9,9V22a.5.5,0,0,0,.5.5h3A.5.5,0,0,0,13,22V14.5a2.5,2.5,0,0,1,5,0V22A.5.5,0,0,0,18.5,22.5Z\" \/>\n    <\/g>\n    <g id=\"vf-social--facebook\">\n      <path xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n        d=\"m18.14 7.17a.5.5 0 0 0 -.37-.17h-3.77v-1.41c0-.28.06-.6.51-.6h3a.44.44 0 0 0 .35-.15.5.5 0 0 0 .14-.34v-4a.5.5 0 0 0 -.5-.5h-4.33c-4.8 0-5.17 4.1-5.17 5.35v1.65h-2.5a.5.5 0 0 0 -.5.5v4a.5.5 0 0 0 .5.5h2.5v11.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-11.5h3.35a.5.5 0 0 0 .5-.45l.42-4a.5.5 0 0 0 -.13-.38z\" \/>\n    <\/g>\n    <g id=\"vf-social--twitter\">\n    <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"><\/path>\n    <\/g>\n    <g id=\"vf-social--youtube\">\n      <path xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n        d=\"M20.06,3.5H3.94A3.94,3.94,0,0,0,0,7.44v9.12A3.94,3.94,0,0,0,3.94,20.5H20.06A3.94,3.94,0,0,0,24,16.56V7.44A3.94,3.94,0,0,0,20.06,3.5ZM16.54,12,9.77,16.36A.5.5,0,0,1,9,15.94V7.28a.5.5,0,0,1,.77-.42l6.77,4.33a.5.5,0,0,1,0,.84Z\" \/>\n    <\/g>\n    <g id=\"vf-social--instagram\">\n      <path xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n        d=\"M17.5,0H6.5A6.51,6.51,0,0,0,0,6.5v11A6.51,6.51,0,0,0,6.5,24h11A6.51,6.51,0,0,0,24,17.5V6.5A6.51,6.51,0,0,0,17.5,0ZM12,17.5A5.5,5.5,0,1,1,17.5,12,5.5,5.5,0,0,1,12,17.5Zm6.5-11A1.5,1.5,0,1,1,20,5,1.5,1.5,0,0,1,18.5,6.5Z\" \/>\n    <\/g>\n  <\/defs>\n<\/svg>\n<div class=\"vf-social-links  \">\n    <h3 class=\"vf-social-links__heading\">\n    Example  <\/h3>\n  <\/div>\n\n\n\n<p><\/p>\n\n\n<div class=\"vf-links vf-links__list--has-image\">\n    <ul class=\"vf-links__list vf-list\">\n        <li class=\"vf-list__item\">\n              <a class=\"vf-list__link\" href=\"https:\/\/stable.visual-framework.dev\/components\/vf-social-links\/\">\n          <img decoding=\"async\" width=\"85\" height=\"61\" src=\"https:\/\/stable.visual-framework.dev\/wordpress\/wp-content\/uploads\/2021\/02\/Screenshot-2021-02-09-at-22.18.00.png\" class=\"vf-list__image\" alt=\"\" loading=\"lazy\" itemprop=\"image\" \/>Learn more about this component        <\/a>\n          <\/li>\n      <\/ul>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":50,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-title-left-aligned.php","meta":{"_acf_changed":false,"footnotes":""},"embl_taxonomy":[],"acf":[],"embl_taxonomy_terms":[],"_links":{"self":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/442"}],"collection":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/comments?post=442"}],"version-history":[{"count":3,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/442\/revisions"}],"predecessor-version":[{"id":492,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/442\/revisions\/492"}],"up":[{"embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/50"}],"wp:attachment":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/media?parent=442"}],"wp:term":[{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/embl_taxonomy?post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}