{"id":231,"date":"2025-03-24T14:03:10","date_gmt":"2025-03-24T18:03:10","guid":{"rendered":"https:\/\/www.golive.clarku.edu\/jp\/?page_id=231"},"modified":"2025-11-04T14:05:08","modified_gmt":"2025-11-04T19:05:08","slug":"icons","status":"publish","type":"page","link":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/","title":{"rendered":"Icons"},"content":{"rendered":"\n<p class=\"intro\">Icons, like any picture, grab the eye: use them where it counts.<\/p>\n\n\n\n<p>While you can embellish nearly anything with an icon, you want to use them thoughtfully. Without context, an icon is easily misunderstood, so they tend to work best when paired with a text label.  <\/p>\n\n\n\n<p>Since an icon draws the eye, they&#8217;re well-suited to calls to action or other important, actionable information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons<\/h2>\n\n\n\n<p>Using icons on buttons can also suggest the sort of content a visitor can expect to find after they click. For example, a play button usually signals a video or podcast, a circled &#8220;i&#8221; signals more information, and a clipboard\/pencil indicates some sort of form. Consider:<\/p>\n\n\n\n<div class=\"wp-block-buttons double-bottom-margin is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-icon__play\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\"><span class=\"wp-block-button__link-icon\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 30 30\">\n  <path fill=\"currentColor\" d=\"M15,4.5c-5.58,0-10.11,4.7-10.11,10.5s4.53,10.5,10.11,10.5,10.11-4.7,10.11-10.5-4.53-10.5-10.11-10.5ZM11.89,20.06v-9.33l8.56,4.67-8.56,4.67Z\"\/>\n<\/svg><\/span>Challenge. Change.<\/a><\/div>\n\n\n\n<div class=\"wp-block-button has-icon__info\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\"><span class=\"wp-block-button__link-icon\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 30 30\">\n  <path fill=\"currentColor\" d=\"M15,4.5c-5.58,0-10.11,4.7-10.11,10.5s4.53,10.5,10.11,10.5,10.11-4.7,10.11-10.5-4.53-10.5-10.11-10.5ZM13.6,10.48c0-.45.22-.7.73-.7h1.71c.51,0,.73.25.73.7v.79c0,.45-.25.7-.73.7h-1.71c-.48,0-.73-.25-.73-.7v-.79ZM18.9,19.85c0,.22-.15.37-.37.37h-6.29c-.21,0-.36-.15-.36-.37v-1.37c0-.21.15-.36.36-.36h1.62v-3.47h-1.58c-.21,0-.36-.15-.36-.36v-1.37c0-.22.15-.37.36-.37h3.84c.52,0,.79.24.79.79v4.78h1.61c.22,0,.37.15.37.36v1.37Z\"\/>\n<\/svg><\/span>Request Information<\/a><\/div>\n\n\n\n<div class=\"wp-block-button has-icon__apply\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\"><span class=\"wp-block-button__link-icon\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 30 30\">\n  <path fill=\"currentColor\" d=\"M7.51,21.22v-12c0-.55.45-1,1-1h10c.55,0,1,.45,1,1v7.21l2.83-2.83c.05-.05.11-.09.17-.14v-6.24c0-1.1-.9-2-2-2h-4.06c-.41-1.26-1.62-2.08-2.94-2-1.32-.08-2.53.74-2.94,2h-4.06c-1.1,0-2,.9-2,2v16c0,1.1.9,2,2,2h7.3l.33-2.95s.02-.03.02-.05h-5.65c-.55,0-1-.45-1-1Z\"\/>\n  <g>\n    <path fill=\"currentColor\" d=\"M10.51,10.22h6c.55,0,1,.45,1,1h0c0,.55-.45,1-1,1h-6c-.55,0-1-.45-1-1h0c0-.55.45-1,1-1Z\"\/>\n    <path fill=\"currentColor\" d=\"M10.51,14.22h6c.55,0,1,.45,1,1h0c0,.55-.45,1-1,1h-6c-.55,0-1-.45-1-1h0c0-.55.45-1,1-1Z\"\/>\n    <path fill=\"currentColor\" d=\"M10.51,18.22h4c.55,0,1,.45,1,1h0c0,.55-.45,1-1,1h-4c-.55,0-1-.45-1-1h0c0-.55.45-1,1-1Z\"\/>\n  <\/g>\n  <path fill=\"currentColor\" d=\"M19.72,25.1l7.07-7.07c.78-.78.78-2.05,0-2.83l-.55-.55c-.78-.78-2.05-.78-2.83,0l-7.07,7.07,3.38,3.38Z\"\/>\n  <polygon fill=\"currentColor\" points=\"15.2 26.24 19.02 25.81 15.63 22.43 15.2 26.24\"\/>\n<\/svg><\/span>Register today<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Contact information<\/h2>\n\n\n\n<p>One of the most commonly accessed pieces of information on our website is contact information.  Visitors are often looking for an email address or phone number to ask a specific question.  Icons can help a visitor quickly identify ways to get in touch.<\/p>\n\n\n\n<div class=\"wp-block-columns contact-area is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:42%\">\n<div class=\"wp-block-cover has-custom-content-position is-position-bottom-left\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim wp-block-cover__gradient-background has-background-gradient has-gradient-2-gradient-background\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background\" alt=\"\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/themes\/jonas\/images\/lavender.jpg\" style=\"object-position:54% 35%\" data-object-fit=\"cover\" data-object-position=\"54% 35%\"\/><div class=\"wp-block-cover__inner-container is-layout-constrained wp-container-core-cover-is-layout-639b5052 wp-block-cover-is-layout-constrained\"><div style=\"color:var(--clarku-color-white)\" class=\"eyebrow  has-text-align-left\">Contact information<\/div>\n\n\n\n<h2 class=\"wp-block-heading has-white-color has-text-color has-link-color has-small-font-size wp-elements-3abae385c6c4ce90651d86f06f670c3c\">Undergraduate Admissions<\/h2>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group contact-text has-light-warm-gray-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"icon map has-small-font-size\">3 Maywood Street<br>Worcester, MA 01610<\/p>\n\n\n\n<p class=\"icon tel has-small-font-size\">1-508-793-7431<\/p>\n\n\n\n<p class=\"icon email has-small-font-size\"><a href=\"mailto:admissions@clarku.edu\">admissions@clarku.edu<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>In the case of a contact area, icons are added to paragraphs (or other elements) by applying specific classes to the block.  To add classes, select the block, and in the sidebar, navigate to Block \u2192 Advanced \u2192 Additional CSS Classes.  Enter <code>icon map<\/code>.  You can substitute map for other common contact related classes: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"icon tel\"><code>tel<\/code><\/li>\n\n\n\n<li class=\"icon fax\"><code>fax<\/code><\/li>\n\n\n\n<li class=\"icon map\"><code>map<\/code><\/li>\n\n\n\n<li class=\"icon email\"><code>email<\/code><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icons, like any picture, grab the eye: use them where it counts. While you can embellish nearly anything with an icon, you want to use them thoughtfully. Without context, an icon is easily misunderstood, so they tend to work best when paired with a text label. Since an icon draws the eye, they&#8217;re well-suited to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-231","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Icons - ClarkU WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Icons\" \/>\n<meta property=\"og:description\" content=\"Icons, like any picture, grab the eye: use them where it counts. While you can embellish nearly anything with an icon, you want to use them thoughtfully. Without context, an icon is easily misunderstood, so they tend to work best when paired with a text label. Since an icon draws the eye, they&#8217;re well-suited to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/\" \/>\n<meta property=\"og:site_name\" content=\"ClarkU WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T19:05:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/themes\/jonas\/images\/lavender.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/icons\\\/\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/icons\\\/\",\"name\":\"Icons - ClarkU WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/icons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/themes\\\/jonas\\\/images\\\/lavender.jpg\",\"datePublished\":\"2025-03-24T18:03:10+00:00\",\"dateModified\":\"2025-11-04T19:05:08+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/icons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/icons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/themes\\\/jonas\\\/images\\\/lavender.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/themes\\\/jonas\\\/images\\\/lavender.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/231#breadcrumbs\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":0,\"name\":\"ClarkU\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/\"},{\"@type\":\"ListItem\",\"position\":1,\"name\":\"ClarkU WordPress\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/\",\"name\":\"ClarkU WordPress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Icons - ClarkU WordPress","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:\/\/www.clarku.edu\/wordpress\/components\/icons\/","og_locale":"en_US","og_type":"article","og_title":"Icons","og_description":"Icons, like any picture, grab the eye: use them where it counts. While you can embellish nearly anything with an icon, you want to use them thoughtfully. Without context, an icon is easily misunderstood, so they tend to work best when paired with a text label. Since an icon draws the eye, they&#8217;re well-suited to [&hellip;]","og_url":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/","og_site_name":"ClarkU WordPress","article_modified_time":"2025-11-04T19:05:08+00:00","og_image":[{"url":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/themes\/jonas\/images\/lavender.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/","url":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/","name":"Icons - ClarkU WordPress","isPartOf":{"@id":"https:\/\/www.clarku.edu\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/#primaryimage"},"image":{"@id":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/themes\/jonas\/images\/lavender.jpg","datePublished":"2025-03-24T18:03:10+00:00","dateModified":"2025-11-04T19:05:08+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clarku.edu\/wordpress\/components\/icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/icons\/#primaryimage","url":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/themes\/jonas\/images\/lavender.jpg","contentUrl":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/themes\/jonas\/images\/lavender.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/231#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"name":"ClarkU","item":"https:\/\/www.clarku.edu\/"},{"@type":"ListItem","position":1,"name":"ClarkU WordPress","item":"https:\/\/www.clarku.edu\/wordpress"}]},{"@type":"WebSite","@id":"https:\/\/www.clarku.edu\/wordpress\/#website","url":"https:\/\/www.clarku.edu\/wordpress\/","name":"ClarkU WordPress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clarku.edu\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":4,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/231\/revisions\/611"}],"up":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}