{"id":15795,"date":"2018-09-20T10:05:58","date_gmt":"2018-09-20T14:05:58","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15795"},"modified":"2020-10-13T15:38:31","modified_gmt":"2020-10-13T19:38:31","slug":"icons","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/icons\/","title":{"rendered":"Working with Icons"},"content":{"rendered":"\n

BoldGrid’s WordPress Page Builder<\/a> gives you the ability to drag and drop Font Awesome Icons into your designs. The following guide will walk you through adding and modifying your Icon design.<\/p>\n

Adding an Icon<\/h2>\n
\n
Place the cursor in your content where you wish to place the Icon<\/li>\n
Click the + in the DropTab to bring up the Block Components<\/li>\n
Select Icon<\/li>\n<\/ul>\n
$\"Add$ <\/a><\/p>\n
\n
Using the popover, select the Icon you wish to insert<\/li>\n
Click the orange Customize Design button at the bottom of the panel to further customize your Icon<\/li>\n<\/ul>\n
$\"Icon$ <\/a><\/p>\n
Editing an Icon<\/h2>\n
\n
Click on the Icon that you want to edit to open the Icon panel<\/li>\n
Select an Icon design from the list of available options<\/li>\n
Click Customize Design<\/b> to further modify your Icon with:\n\n
Padding and Margin – <\/b>What’s the difference between padding and margin?<\/a><\/li>\n
Font Size<\/li>\n
Color and Background Color – Don’t see the color you want? Learn how to change colors in the Customizer<\/a><\/li>\n
Rotation – Please note that not all Icons can be rotated<\/li>\n
Border and Border Radius<\/li>\n
Animation<\/li>\n
Responsive Utilities – show or hide the Icon on different screen sizes<\/li>\n
Custom CSS<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
$\"Post$ <\/a><\/p>\n
Congratulations!<\/span><\/p>\n
Now you know how to add and edit Icons to your WordPress website<\/a>. Next, you may want to learn how to work with Fonts<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
BoldGrid’s WordPress Page Builder gives you the ability to drag and drop Font Awesome Icons into your designs. The following guide will walk you through adding and modifying your Icon design. Adding an Icon Place the cursor in your content where you wish to place the Icon Click the + in the DropTab to bring […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[690,688,679],"class_list":["post-15795","post","type-post","status-publish","format-standard","hentry","category-page-builder","tag-faq","tag-icons","tag-page-builder","feature-type-free","experience-level-intermediate"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15795"}],"version-history":[{"count":7,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15795\/revisions"}],"predecessor-version":[{"id":28248,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15795\/revisions\/28248"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Adding an Icon<\/h2>\n\nPlace the cursor in your content where you wish to place the Icon<\/li>\nClick the + in the DropTab to bring up the Block Components<\/li>\n

Editing an Icon<\/h2>\n\nClick on the Icon that you want to edit to open the Icon panel<\/li>\nSelect an Icon design from the list of available options<\/li>\n