{"id":34224,"date":"2021-05-18T14:14:44","date_gmt":"2021-05-18T19:14:44","guid":{"rendered":"https:\/\/wiredimpact.com\/?post_type=support&#038;p=34224"},"modified":"2025-10-02T12:40:10","modified_gmt":"2025-10-02T17:40:10","slug":"adding-icons","status":"publish","type":"support","link":"https:\/\/wiredimpact.com\/support\/adding-icons\/","title":{"rendered":"Adding Icons to Your Content"},"content":{"rendered":"\n<p>Icons provide an easy and effective way to add visual emphasis to your website. These symbols can be linked to help users get to a subpage or simply communicate the information on the page. You can see how icons are used on the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/pioneer.wiredwebsites.org\/about\/\" target=\"_blank\">About page<\/a> of our Pioneer Demo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"235\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg\" alt=\"A screenshot of location icon with text in the front end of a website\" class=\"wp-image-58032\" style=\"width:638px\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg 691w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1-369x125.jpg 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1-530x180.jpg 530w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-an-icon-to-your-page\">How to Add an Icon to Your Page<\/h2>\n\n\n\n<p>You can add an icon to any content on your website by adding the Icon block in your WordPress Editor.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make sure you\u2019re signed in to the back end of your website and navigate to the page you\u2019d like to add an icon to.<\/li>\n\n\n\n<li>Hover over the top or bottom of an existing block to reveal a blue \u201cplus\u201d icon. Click on the plus icon to add a new block. <\/li>\n\n\n\n<li>Select the Icon block from the list to add it to the desired spot on your page.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"411\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-2.jpg\" alt=\"A screenshot of Layout Elements on a  page highlighting the Icon block option \" class=\"wp-image-58034\" style=\"width:738px\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-2.jpg 904w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-2-369x168.jpg 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-2-768x349.jpg 768w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-2-530x241.jpg 530w\" sizes=\"(max-width: 904px) 100vw, 904px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tip: <\/strong>You can also use \u201cEnter\u201d to create a new block. Then, type \u201c\/icon\u201d to quickly find and add the Icon block to your page.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image is-style-pointy-bottom-right-corner\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"145\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-3.jpg\" alt=\"A screenshot of an icon block\" class=\"wp-image-58035\" style=\"width:438px\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-3.jpg 498w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-3-369x107.jpg 369w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Scroll through the available icons or use the \u201cSearch Icons\u201d field to find the icon you\u2019d like to add. A full gallery of the icons available can be found at <a href=\"https:\/\/fontawesome.com\/icons?d=gallery&amp;m=free\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome<\/a>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"480\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-4.jpg\" alt=\"A screenshot of an icon block with a gallery of icons\" class=\"wp-image-58036\" style=\"width:638px\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-4.jpg 729w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-4-369x243.jpg 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-4-530x349.jpg 530w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Once you\u2019ve selected an icon, you have several options to format it on your page:\n<ul class=\"wp-block-list\">\n<li>Position the icon with wrapped text or on its own line<\/li>\n\n\n\n<li>Resize the icon to be small, medium or large on the page <\/li>\n\n\n\n<li><a href=\"#show-content\">Choose to show content beside or under your icon<\/a><\/li>\n\n\n\n<li><a href=\"#link-icon\">Link your icon to a related page or post on your website<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"879\" height=\"314\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-5.jpg\" alt=\"A screenshot of the icon block highlighting the icon menu at the top of the block\" class=\"wp-image-58037\" style=\"width:738px\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-5.jpg 879w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-5-369x132.jpg 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-5-768x274.jpg 768w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-5-530x189.jpg 530w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Once you\u2019ve got your icon set up the way you\u2019d like, preview your page by clicking the laptop button. We recommend using the \u201cPreview in new tab\u201d option for the most accurate view of your page. When you\u2019re ready, click the blue Save or Update button in the upper right-hand corner of your screen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show-content\">Using the Show Content option<\/h3>\n\n\n\n<p>When you choose to use the \u201cShow Content\u201d option for an icon, you\u2019ll see default text prompting you to \u201cStart writing or type \/ to choose a block\u201d. Within this section, you can add new text, nested blocks or drag in existing content blocks to pair with the icon. <\/p>\n\n\n\n<p>You can also turn off this option entirely by clicking the eye icon with a slash through it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"452\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-6.gif\" alt=\"A GIF demonstrating how to drag in existing content into the icon block\" class=\"wp-image-58039\" style=\"width:738px\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"link-icon\">Using the Link Icon option<\/h3>\n\n\n\n<p>Select the \u201cLink Icon\u201d option to link your icon to another page of your website or an external resource. When you click the link button, a field will appear. Start typing the name of the page you\u2019re planning to link to or paste in a website URL. Then click the \u201cApply\u201d button to ensure your icon is linked.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"903\" height=\"497\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon.7.jpg\" alt=\"A screenshot of the icon block highlighting the Link icon at the top of the block\" class=\"wp-image-58040\" style=\"width:738px\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon.7.jpg 903w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon.7-369x203.jpg 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon.7-768x423.jpg 768w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon.7-530x292.jpg 530w\" sizes=\"(max-width: 903px) 100vw, 903px\" \/><\/figure><\/div>\n\n\n<p>Your icon will change color. This helps users to understand that the icon is a link and can be clicked.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-off-white-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"is-style-h3 wp-block-heading\" id=\"still-have-questions\">Still Have Questions?<\/h2>\n\n\n\n<p><strong>The quickest way to get support<\/strong> is to reach out to us within your website\u2019s admin dashboard. Log into your website and then fill out the Request Help form. You\u2019ll hear back from us within one business day.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-no-border\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wiredimpact.com\/request-help\/\">Learn more about requesting help<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-34224","support","type-support","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adding Icons to Your Content - Wired Impact<\/title>\n<meta name=\"description\" content=\"Learn how to add icons from our free bank of available icons to pages or posts within your Wired Impact website. Find detailed instructions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wiredimpact.com\/support\/adding-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Icons to Your Content - Wired Impact\" \/>\n<meta property=\"og:description\" content=\"Learn how to add icons from our free bank of available icons to pages or posts within your Wired Impact website. Find detailed instructions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wiredimpact.com\/support\/adding-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Wired Impact\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wiredimpact\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-02T17:40:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"691\" \/>\n\t<meta property=\"og:image:height\" content=\"235\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wiredimpact\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/\",\"url\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/\",\"name\":\"Adding Icons to Your Content - Wired Impact\",\"isPartOf\":{\"@id\":\"https:\/\/wiredimpact.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg\",\"datePublished\":\"2021-05-18T19:14:44+00:00\",\"dateModified\":\"2025-10-02T17:40:10+00:00\",\"description\":\"Learn how to add icons from our free bank of available icons to pages or posts within your Wired Impact website. Find detailed instructions.\",\"breadcrumb\":{\"@id\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wiredimpact.com\/support\/adding-icons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/#primaryimage\",\"url\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg\",\"contentUrl\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg\",\"width\":691,\"height\":235},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wiredimpact.com\/support\/adding-icons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wiredimpact.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Icons to Your Content\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wiredimpact.com\/#website\",\"url\":\"https:\/\/wiredimpact.com\/\",\"name\":\"Wired Impact\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/wiredimpact.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wiredimpact.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wiredimpact.com\/#organization\",\"name\":\"Wired Impact\",\"url\":\"https:\/\/wiredimpact.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png\",\"contentUrl\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png\",\"width\":1024,\"height\":1024,\"caption\":\"Wired Impact\"},\"image\":{\"@id\":\"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/wiredimpact\",\"https:\/\/x.com\/wiredimpact\",\"https:\/\/www.instagram.com\/wiredimpact\/\",\"https:\/\/www.linkedin.com\/company\/wired-impact\/\",\"https:\/\/www.pinterest.com\/wiredimpact\/\",\"https:\/\/www.youtube.com\/user\/wiredimpact\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Icons to Your Content - Wired Impact","description":"Learn how to add icons from our free bank of available icons to pages or posts within your Wired Impact website. Find detailed instructions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wiredimpact.com\/support\/adding-icons\/","og_locale":"en_US","og_type":"article","og_title":"Adding Icons to Your Content - Wired Impact","og_description":"Learn how to add icons from our free bank of available icons to pages or posts within your Wired Impact website. Find detailed instructions.","og_url":"https:\/\/wiredimpact.com\/support\/adding-icons\/","og_site_name":"Wired Impact","article_publisher":"https:\/\/www.facebook.com\/wiredimpact","article_modified_time":"2025-10-02T17:40:10+00:00","og_image":[{"width":691,"height":235,"url":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wiredimpact","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wiredimpact.com\/support\/adding-icons\/","url":"https:\/\/wiredimpact.com\/support\/adding-icons\/","name":"Adding Icons to Your Content - Wired Impact","isPartOf":{"@id":"https:\/\/wiredimpact.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wiredimpact.com\/support\/adding-icons\/#primaryimage"},"image":{"@id":"https:\/\/wiredimpact.com\/support\/adding-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg","datePublished":"2021-05-18T19:14:44+00:00","dateModified":"2025-10-02T17:40:10+00:00","description":"Learn how to add icons from our free bank of available icons to pages or posts within your Wired Impact website. Find detailed instructions.","breadcrumb":{"@id":"https:\/\/wiredimpact.com\/support\/adding-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wiredimpact.com\/support\/adding-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wiredimpact.com\/support\/adding-icons\/#primaryimage","url":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg","contentUrl":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/05\/icon-1.jpg","width":691,"height":235},{"@type":"BreadcrumbList","@id":"https:\/\/wiredimpact.com\/support\/adding-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wiredimpact.com\/"},{"@type":"ListItem","position":2,"name":"Adding Icons to Your Content"}]},{"@type":"WebSite","@id":"https:\/\/wiredimpact.com\/#website","url":"https:\/\/wiredimpact.com\/","name":"Wired Impact","description":"","publisher":{"@id":"https:\/\/wiredimpact.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wiredimpact.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wiredimpact.com\/#organization","name":"Wired Impact","url":"https:\/\/wiredimpact.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/","url":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png","contentUrl":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png","width":1024,"height":1024,"caption":"Wired Impact"},"image":{"@id":"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wiredimpact","https:\/\/x.com\/wiredimpact","https:\/\/www.instagram.com\/wiredimpact\/","https:\/\/www.linkedin.com\/company\/wired-impact\/","https:\/\/www.pinterest.com\/wiredimpact\/","https:\/\/www.youtube.com\/user\/wiredimpact"]}]}},"_links":{"self":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/support\/34224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/types\/support"}],"version-history":[{"count":0,"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/support\/34224\/revisions"}],"wp:attachment":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/media?parent=34224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}