{"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":"2025-11-18T09:39:00","modified_gmt":"2025-11-18T14:39:00","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":"

Font Awesome makes it easy to add icons to your website. You can see a full list of the free icons available to use at fontawesome.com<\/a> under the list of free icons. We currently have access to the free icons available in\u00a0Font Awesome 5.14.0<\/a><\/strong>. Follow these instructions to add icons to your site.<\/p>\n

\n
\n

<\/i>\n

People<\/h2>\n<\/div>\n
\n

<\/i>\n

News<\/h2>\n<\/div>\n
\n

<\/i>\n

Events<\/h2>\n<\/div>\n<\/div>\n<\/div>\n

1. Add the Shortcode<\/h2>\n

Copy the shortcode below and paste it into a page, post, event, etc. This will add a Carolina blue (#007fae) calendar icon to the page.<\/p>\n

[icon type=\"far fa-calendar-alt fa-3x\" color=\"#007fae\"]<\/code><\/p>\n

2. Customize the Icon<\/h2>\n

Select the icon you wish to use on fontawesome.com<\/a> and locate the code at the top of the page. Copy the code inside the quotation marks. <\/strong>\u00a0In the example below, you would copy the “fas fa-desktop<\/strong>” and paste it into the existing shortcode (listed above), replacing the fa-calendar-alt.<\/span><\/p>\n

\"Example<\/p>\n

 <\/p>\n

2. Set the Icon Size<\/h2>\n

The fa-3x<\/strong> in the shortcode specifies the size of the icon. This can be modified to change the icon size.\u00a0 The size options and their corresponding code are listed below. Simply change the shortcode to the size you prefer.<\/p>\n

\n
\n

fa-1x (default)<\/strong><\/p>\n

<\/i>\n<\/div>\n

\n

fa-2x<\/strong><\/p>\n

<\/i>\n<\/div>\n

\n

fa-3x<\/strong><\/p>\n

<\/i>\n<\/div>\n

\n

fa-4x<\/strong><\/p>\n

<\/i>\n<\/div>\n<\/div>\n

3. Set the Icon Color<\/h2>\n

Finally, you can change the color of the icon. Typically the icon should be #007FAE<\/strong> (Carolina blue) or #13294B<\/strong> (Carolina Athletics navy) on a white or light background or #FFFFFF<\/strong> (white) on a dark background. These are official Carolina colors as defined by the University Branding and Identity Guidelines<\/a>.
\n

\n
\n

<\/i>\n

#007fae is Carolina blue<\/p>\n<\/div>\n

\n

<\/i>\n

#13294B is Carolina Athletics navy<\/p>\n<\/div>\n

\n

<\/i>\n

#ffffff is white<\/p>\n<\/div>\n<\/div>\n

\n

Examples<\/h2>\n

\"Example<\/span><\/p>\n

Surgery<\/a> displays several Font Awesome icons on their home page.<\/p>\n

\n

\"Example<\/span><\/p>\n

Allied Health Sciences<\/a> also displays Font Awesome icons on their home page.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Font Awesome makes it easy to add icons to your website. You can see a full list of the free icons available to use at fontawesome.com under the list of free icons. We currently have access to the free icons available in\u00a0Font Awesome 5.14.0. Follow these instructions to add icons to your site. 1. Add … 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":0,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9699\/revisions"}],"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}]}}