{"id":365,"date":"2020-07-09T11:10:37","date_gmt":"2020-07-09T11:10:37","guid":{"rendered":"http:\/\/redhost:8888\/documentation\/?page_id=365"},"modified":"2025-02-14T11:41:17","modified_gmt":"2025-02-14T11:41:17","slug":"icons","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/marni\/icons\/","title":{"rendered":"Icons"},"content":{"rendered":"\n<p>MARNI includes the <strong>Font Awesome<\/strong> as well as the <strong>Pe 7 Icon 7 Stroke<\/strong> icon font.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Font Awesome<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choose your icon from here:&nbsp;<a href=\"https:\/\/fontawesome.com\/search?o=r&amp;m=free\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome<\/a><\/li>\n\n\n\n<li>Click the icon that you wish to use<\/li>\n\n\n\n<li>Copy the HTML code<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"272\" src=\"https:\/\/docs.redsun.design\/marni\/wp-content\/uploads\/sites\/5\/2023\/02\/fa-1-1024x272.jpg\" alt=\"\" class=\"wp-image-4840\" style=\"width:512px;height:136px\" srcset=\"https:\/\/docs.redsun.design\/marni\/wp-content\/uploads\/sites\/5\/2023\/02\/fa-1-1024x272.jpg 1024w, https:\/\/docs.redsun.design\/marni\/wp-content\/uploads\/sites\/5\/2023\/02\/fa-1-300x80.jpg 300w, https:\/\/docs.redsun.design\/marni\/wp-content\/uploads\/sites\/5\/2023\/02\/fa-1-768x204.jpg 768w, https:\/\/docs.redsun.design\/marni\/wp-content\/uploads\/sites\/5\/2023\/02\/fa-1.jpg 1236w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>You can now add the code to wherever you wish to display the icon, for example in the <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/support\/article\/custom-html\/\" target=\"_blank\">Custom HTML block<\/a><\/li>\n<\/ol>\n\n\n\n<h6 class=\"wp-block-heading\">How to increase the icon font size and change the color:<\/h6>\n\n\n\n<p>Example increase icon size x 5, and use light grey color:&nbsp;<code>&lt;i class=\"fa-regular fa-heart fa-5x\" style=\"color: #aaa;\"&gt;&lt;\/i&gt;<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pe Icon 7 Stroke<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choose your icon from here:&nbsp;<a rel=\"noreferrer noopener\" href=\"http:\/\/fontawesome.io\/icons\/\" target=\"_blank\">&nbsp;<\/a><a rel=\"noreferrer noopener\" href=\"http:\/\/themes-pixeden.com\/font-demos\/7-stroke\/\" target=\"_blank\">Pe Icon 7 Stroke<\/a><\/li>\n\n\n\n<li>Use the code as follows (replace &#8220;anchor&#8221; with whatever icon you would like to use):&nbsp;<code>&lt;i class=\"pe-7s-anchor\"&gt;&lt;\/i&gt;<\/code><\/li>\n\n\n\n<li>You can now add the code to wherever you wish to display the icon, for example in the <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/support\/article\/custom-html\/\" target=\"_blank\">Custom HTML block<\/a><\/li>\n<\/ol>\n\n\n\n<h6 class=\"wp-block-heading\">How to increase the icon font size and change the color:<\/h6>\n\n\n\n<p>Example increase icon size x 5, and use light grey color:&nbsp;<code>&lt;i class=\"pe-7s-anchor pe-5x\" style=\"color: #aaa;\"&gt;&lt;\/i&gt;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"MARNI includes the Font Awesome as well as the Pe 7 Icon 7 Stroke icon font. Font Awesome Choose your icon from here:&nbsp;Font Awesome Click the icon that you wish ...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-365","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":2,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages\/365\/revisions"}],"predecessor-version":[{"id":5327,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages\/365\/revisions\/5327"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/media?parent=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}