City of Tampa Style Guide

Custom Icons 8.2

Toggle example guides Toggle HTML markup

Custom and commonly used icons that use the icon font strategy, if you need more icons load up the pro kit <script src="https://kit.fontawesome.com/ca4203438a.js" crossorigin="anonymous"></script> which is javascript based and gives you full access to the 7k icon library. Example usage in CSS .field__item::before { font-family: "fontello"; content: '\e804'; }

When to use: Some guidance on when to use this component.

When not to: Some guidance on when it is not the best choice.

Notes: This is a limited set of icons included with the base theme, for all icons use FontAwesome Pro Kit.

<insert-markup>typography.customicons-</insert-markup>
icon-down-open \e800
icon-left-open \e801
icon-right-open \e802
icon-up-open \e803
icon-calendar-1 \e804
icon-print \e805
icon-export \e806
icon-plus \e807
icon-minus \e808
icon-lock \e809
icon-lock-open \e80a
icon-check \e80b
icon-ok-circled \e80c
icon-phone \e80d
icon-clock \e80e
icon-block \e80f
icon-thumbs-up \e810
icon-thumbs-down \e811
icon-video \e812
icon-help-circled \e813
icon-alert_tampa_logo \e900
icon-accessible \e901
icon-alert-tampa-logo \e902
icon-arrow-left \e903
icon-arrow-right \e904
icon-calendar \e905
icon-city-seal \e906
icon-compass \e907
icon-info \e908
icon-logo \e90b
icon-map \e90c
icon-marker \e90d
icon-payment-add \e90e
icon-permit \e90f
icon-speech-bubble \e910
icon-way-sign \e911
icon-check-empty \f096
icon-twitter \f099
icon-menu \f0c9
icon-doc-text \f0f6
icon-at \f1fa
icon-universal-access \f29a
icon-facebook-squared \f308
Source: src/scss/fontello/fontello-src.scss, line 1