{"id":1840,"date":"2017-07-14T12:03:15","date_gmt":"2017-07-14T19:03:15","guid":{"rendered":"https:\/\/ginastricklind.com\/?p=1840"},"modified":"2017-07-14T12:03:39","modified_gmt":"2017-07-14T19:03:39","slug":"change-beaver-builder-icon-style","status":"publish","type":"post","link":"https:\/\/ginastricklind.com\/change-beaver-builder-icon-style\/","title":{"rendered":"How to Change Beaver Builder Social Icon Style"},"content":{"rendered":"<p>Beaver Builder has been a great tool that most of my clients are really enjoying using. It makes their experience with their website much less dreadful. There&#8217;s so much flexibility for the developer and also for the designer.<\/p>\n<p>&nbsp;<\/p>\n<p>I wrote only a couple lines because I didn&#8217;t want my social icons to have a background, I felt like the weight of the icons were too heavy and distracting for the area.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/gstricklind\/41280644f541f0b88b1a6b49b3df53dd.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/gstricklind\/41280644f541f0b88b1a6b49b3df53dd\">Gist<\/a>.<\/noscript><\/div>\n<p>The result is the icons inherit the color set for the footer text, and we remove the circle backgrounds.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1841\" src=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-14-at-11.59.35-AM.png\" alt=\"\" width=\"429\" height=\"133\" srcset=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-14-at-11.59.35-AM.png 429w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-14-at-11.59.35-AM-80x25.png 80w\" sizes=\"(max-width: 429px) 100vw, 429px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>In addition, if you want to change the size of those icons, just add:\u00a0<code>font-size: 1.5em;<\/code> to the\u00a0<code>i:nth-child(2)<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beaver Builder has been a great tool that most of my clients are really enjoying using. It makes their experience with their website much less dreadful. There&#8217;s so much flexibility for the developer and also for the designer. &nbsp; I wrote only a couple lines because I didn&#8217;t want my social icons to have a background, I felt like the weight of the icons were too heavy and distracting for the area. View the code on Gist. The result is [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,55,16],"tags":[],"_links":{"self":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts\/1840"}],"collection":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/comments?post=1840"}],"version-history":[{"count":3,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts\/1840\/revisions"}],"predecessor-version":[{"id":1843,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts\/1840\/revisions\/1843"}],"wp:attachment":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/media?parent=1840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/categories?post=1840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/tags?post=1840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}