{"id":9699,"date":"2020-11-11T10:56:23","date_gmt":"2020-11-11T15:56:23","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=9699"},"modified":"2026-04-24T20:11:31","modified_gmt":"2026-04-25T00:11:31","slug":"font-awesome-icon","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/font-awesome-icon\/","title":{"rendered":"Font Awesome Icons"},"content":{"rendered":"<p>The SOM web system includes access to <a href=\"https:\/\/fontawesome.com\/v5\/search?ic=free-collection\"><strong>Font Awesome (version 5.14.4)<\/strong><\/a>, which provides a library of icons that can be used to enhance content.\u00a0<strong>Only<\/strong> free icons available in Font Awesome 5.14.4 are supported.<\/p>\n<p>Note that icons can also be added using the <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\"><strong>Cells plugin<\/strong><\/a>. The <strong><a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-nav-bar\/\">Icon Nav Bar<\/a><\/strong> and <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/\"><strong>Icon Boxes<\/strong><\/a> options include built-in icon support and are often easier to use while providing more consistent styling.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-4 col-md-4 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" fas fa-user fa-3x \" style=\"color:#257cb7;\"><\/i>\n<h2 style=\"text-align: center;\"><a href=\"#\">Our People<\/a><\/h2>\n<\/div>\n<div class=\"col-lg-4 col-md-4 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" far fa-newspaper fa-3x \" style=\"color:#257cb7;\"><\/i>\n<h2 style=\"text-align: center;\"><a href=\"#\">News<\/a><\/h2>\n<\/div>\n<div class=\"col-lg-4 col-md-4 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" far fa-calendar-alt fa-3x \" style=\"color:#257cb7;\"><\/i>\n<h2 style=\"text-align: center;\"><a href=\"#\">Events<\/a><\/h2>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>1. Add an Icon<\/h2>\n<p>Font Awesome icons are added using <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/shortcode\/\">shortcode<\/a>.<\/p>\n<p><code>[icon type=\"far fa-calendar-alt\"]<\/code><\/p>\n<p>Copy and paste this shortcode into your page where you want the icon to appear.<\/p>\n<h2>2. Change the Icon<\/h2>\n<ol>\n<li>Go to the <a href=\"https:\/\/fontawesome.com\/v5\/search?ic=free-collection\">Font Awesome icon library<\/a>.<\/li>\n<li>Find the icon you want to use (ensure it is one of the free icons in version 5.14.4).<\/li>\n<li>Copy the icon\u2019s <strong>full class name<\/strong> (example: far fa-calendar-alt).<\/li>\n<li>Paste it into the existing shortcode, replacing the existing class name (far fa-calendar-alt).<\/li>\n<\/ol>\n<p><strong>Example:<\/strong><\/p>\n<p><code>[icon type=\"fas fa-virus\"]<\/code><\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15672\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class.png\" alt=\"Screenshot of the Font Awesome website, highlighting the class name of an icon.\" width=\"1249\" height=\"511\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class.png 1249w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class-300x123.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class-1024x419.png 1024w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class-768x314.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class-600x245.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/04\/font-awesome-class-560x229.png 560w\" sizes=\"auto, (max-width: 1249px) 100vw, 1249px\" \/><\/span><\/p>\n<h3>Icon Styles<\/h3>\n<p>Font Awesome uses different prefixes depending on the icon style:<\/p>\n<ul>\n<li>fas \u2013 solid icons (most commonly used)<\/li>\n<li>far \u2013 regular (outlined) icons<\/li>\n<li>fab \u2013 brand icons (social media, etc.)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>3. Set the Icon Size<\/h2>\n<p>Icon size is controlled by adding any of the following classes to the <strong>type<\/strong> value in the shortcode. Simply add a space after the icon name and add the icon size. If no size is specified, it defaults to fa-1x.<\/p>\n<p><strong>Example<\/strong><\/p>\n<p><code>[icon type=\"far fa-calendar-alt fa-2x\"]<\/code><\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-3 col-md-3 col-xs-6 col-sm-6 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><strong>fa-1x<\/strong><\/p>\n<p style=\"text-align: center;\"><i class=\" fas fa-desktop \" style=\"\"><\/i>\n<\/div>\n<div class=\"col-lg-3 col-md-3 col-xs-6 col-sm-6 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><strong>fa-2x<\/strong><\/p>\n<p style=\"text-align: center;\"><i class=\" fas fa-desktop fa-2x \" style=\"\"><\/i>\n<\/div>\n<div class=\"col-lg-3 col-md-3 col-xs-6 col-sm-6 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><strong>fa-3x<\/strong><\/p>\n<p style=\"text-align: center;\"><i class=\" fas fa-desktop fa-3x \" style=\"\"><\/i>\n<\/div>\n<div class=\"col-lg-3 col-md-3 col-xs-6 col-sm-6 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><strong>fa-4x<\/strong><\/p>\n<p style=\"text-align: center;\"><i class=\" fas fa-desktop fa-4x \" style=\"\"><\/i>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h2>4. Change the Icon Color<\/h2>\n<p>To change the icon color, add a hexadecimal color value to the shortcode using the format <strong>color=&#8221;#257cb7&#8243;<\/strong>. Refer to our <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">Color and Contrast<\/a> documentation for approved theme colors and guidance on meeting accessible contrast requirements.<\/p>\n<p><strong>Example<\/strong><\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-10 col-md-8 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><code>[icon type=\"fas fa-heartbeat\" color=\"#257cb7\"]<\/code><\/p>\n<\/div>\n<div class=\"col-lg-1 col-md-2 col-xs-6 col-sm-3 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" fas fa-heartbeat fa-3x \" style=\"color:#257cb7;\"><\/i>\n<\/div>\n<div class=\"col-lg-1 col-md-2 col-xs-6 col-sm-3 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" fas fa-heartbeat fa-3x \" style=\"color:#08446D;\"><\/i>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Code Examples<\/h2>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-10 col-md-10 col-xs-10 col-sm-10 oscitas-bootstrap-container\">\n<p><code>[icon type=\"fas fa-envelope\"]<\/code><\/p>\n<\/div>\n<div class=\"col-lg-2 col-md-2 col-xs-2 col-sm-2 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" fas fa-envelope \" style=\"\"><\/i>\n<\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-10 col-md-10 col-xs-10 col-sm-10 oscitas-bootstrap-container\">\n<p><code>[icon type=\"fas fa-phone fa-2x\"]<\/code><\/p>\n<\/div>\n<div class=\"col-lg-2 col-md-2 col-xs-2 col-sm-2 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" fas fa-phone fa-2x \" style=\"\"><\/i>\n<\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-10 col-md-10 col-xs-10 col-sm-10 oscitas-bootstrap-container\">\n<p><code>[icon type=\"far fa-calendar-alt fa-4x\" color=\"#257cb7\"]<\/code><\/p>\n<\/div>\n<div class=\"col-lg-2 col-md-2 col-xs-2 col-sm-2 oscitas-bootstrap-container\">\n<p style=\"text-align: center;\"><i class=\" far fa-calendar-alt fa-4x \" style=\"color:#257cb7;\"><\/i>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Accessibility Considerations<\/h2>\n<p>Icons should support content, not replace it.<\/p>\n<ul>\n<li>Include text alongside icons<\/li>\n<li>Do not rely on icons alone to convey meaning<\/li>\n<li>Screen readers may not interpret icons correctly<\/li>\n<li>Ensure sufficient color contrast between the icon and it&#8217;s background color<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The SOM web system includes access to Font Awesome (version 5.14.4), which provides a library of icons that can be used to enhance content.\u00a0Only free icons available in Font Awesome 5.14.4 are supported. Note that icons can also be added using the Cells plugin. The Icon Nav Bar and Icon Boxes options include built-in icon &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/font-awesome-icon\/\" aria-label=\"Read more about Font Awesome Icons\">Read more<\/a><\/p>\n","protected":false},"author":64010,"featured_media":0,"parent":2212,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9699","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/64010"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=9699"}],"version-history":[{"count":9,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9699\/revisions"}],"predecessor-version":[{"id":15694,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9699\/revisions\/15694"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=9699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}