{"id":586,"date":"2018-05-08T17:43:41","date_gmt":"2018-05-08T17:43:41","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=586"},"modified":"2018-06-14T14:34:20","modified_gmt":"2018-06-14T14:34:20","slug":"iconography","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/iconography\/","title":{"rendered":"Iconography"},"content":{"rendered":"

Style<\/p>\n

\n\t\tIconography
\n\t<\/h1>\n

\t\t\tCode
\n\t\t\tUsage
\n\t\t\t\tCode<\/p>\n

\n\t
\n\t\t\t\t\t\t\t\t
\n\t\t\n
\n\t\t\t
\n\t
\n\t
\n\t\t

\n\t\tIconography helps to elevate our call-to-actions with abstracted marks that simplify meaning for specific peripherals, buttons and functionalities in Neon. <\/span>\n\t<\/h4>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t

\n\t\tFont Awesome<\/span>\n\t<\/h2>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t

We are leveraging Font Awesome<\/a>, to cut down on the cost of creating and updating icons. Use icons as sparingly as possible to avoid overuse. Refer to specific components in our style guide to understand how each icon is used in context.<\/p>\n<\/div>\n\t<\/div>\n<\/div>\n

\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t

\n\t\t\n\t\tIcon Names<\/span>\n\t\t<\/a>\n\t<\/h4>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa fa-pencil<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-flag<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-trash<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-print<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-search<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-calendar<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-plus<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-minus<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-long-arrow-down<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-long-arrow-up<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-long-arrow-left<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-long-arrow-right<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-ellipsis-h<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-ellipsis-v<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-bars<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-times<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-angle-down<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-angle-up<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-angle-right<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-angle-left<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-caret-down<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-caret-up<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-caret-left<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-caret-right<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-star<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-star-o<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-user<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-users<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-sort-amount-asc<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-sort-amount-desc<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-cog<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-home<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-arrows-v<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-download<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-question<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-times-circle<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-envelope-o<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-repeat<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-list<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-phone<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-plus-circle<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-check-circle<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-info-circle<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-exclamation-circle<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-upload<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
\n\t\n\t\t\t\t<\/i>\n\t\t\t\t\t<\/span>\n\t<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t
fa-clock-o<\/h5>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t
\n\t
<\/div>\n<\/div>\n\t\t\t
\n\t
<\/div>\n<\/div>\n\t\t\t
\n\t
<\/div>\n<\/div>\n\t\t\t
\n\t
<\/div>\n<\/div>\n\t<\/div>\n\n
\n\t\t\t
\n\t
\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t

At the moment - the only icons listed are in use. There will be additions to this icon list over the UX pass and beyond. For names of all the Font Awesome icons see their free cheatsheet<\/a> or Bootstrap's cheatsheet<\/a><\/p>\n<\/div>\n\t<\/div>\n<\/div>\n

\n\t
\n\t\t

\n\t\t<\/span>\n\t<\/h4>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>
<\/div>\n

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

Style Iconography Code Usage Code Usage<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-586","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":3,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/586\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/586\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}