MaryKay Connections UI Toolkit

Components

Color definitions

Base grays

  • $utk-color-black
  • $utk-color-gray-darker
  • $utk-color-gray-dark
  • $utk-color-gray
  • $utk-color-gray-light
  • $utk-color-gray-lighter

Brand colors

  • $utk-color-brand-primary
  • $utk-color-brand-success
  • $utk-color-brand-info
  • $utk-color-brand-warning
  • $utk-color-brand-danger

Typography

Headings

H1 – H6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading w/ <small>

Heading 1 Secondary Text

Heading 2 Secondary Text

Heading 3 Secondary Text

Heading 4 Secondary Text

Heading 5 Secondary Text
Heading 6 Secondary Text

Heading modifiers

h6 | This is an <h6> with a class of .h1 to alter it stylistically only
h6 | This is an <h6> with a class of .h2 to alter it stylistically only
h6 | This is an <h6> with a class of .h3 to alter it stylistically only
h6 | This is an <h6> with a class of .h4 to alter it stylistically only
h6 | This is an <h6> with a class of .h5 to alter it stylistically only

h1 | This is an <h1> with a class of .h6 to alter it stylistically only

Body copy

Body text w/ variations

I am a paragraph of text with a link that goes nowhere and the rest of this text is just Latin lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, minima.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Lead-in paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga minus at sunt officiis neque inventore, quasi, unde eligendi laborum, eum et voluptatibus numquam nisi ad.

Emphasis text

This is muted text.

This is warning text.

This is danger text.

This is success text.

This is info text.

Lists

Default Unordered

  • This is a list item in an unordered list.
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other.
    • This is a nested list item.
    • This is another nested list item in an unordered list.
  • This is the last list item.

Unstyled Unordered

  • This is a list item in an unordered list.
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other.
    • This is a nested list item. It's parent <ul> also needs a class of .list-unstyled for the styles to take effect.
    • This is another nested list item in an unordered list.
  • This is the last list item.

Inline Unordered

  • Uno
  • Dos
  • Tres

TODO: Add more list variations

Forms

Example Horizontal Form

Required fields are bold.

Legend
A longer block of help text that breaks onto a new line and may extend beyond one line.

Focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Search Bar

Buttons

Options

Block-level button

Sizes

Button dropdowns

Single-column dropdown

Two-column dropdown

CTA Link

CTA Link

Alerts

Dismissable alerts

Success

Success

You did it! Link within alert.

Info

Info

Some boring information! Link within alert.

Warning

Warning

Best check yo’self! Link within alert.

Danger

Danger

You died! Link within alert.

Dialogs

Tooltips

Popovers

Left Top Bottom Right

Modals

Default modal

This component is built with modifications to address some iOS Safari scrolling issues. Needs testing to verify.

Modal title

One fine body…

Product options panels

Check options panel

Select style

Select quantity

Total $16.92
Personalize

Business card options panel

Select style

Select quantity

Total $28.00
Personalize

Apparel options panel

Notes

  • The “Add a quantity.” text should only be italicized when no quantity is entered. It should not be italic when a quantity is present.

Select sizes

$25.00 Per Item, All Sizes

XXS
XS
SM
MD
LG
XL
1X
2X
3X
Total shirts Add a quantity.
Price per $25.00
Total $2,500.00
Add to Bag

Apparel options panel — with error state.

Notes

  • Illustrates the error state when more than 100 shirts are entered in total. The error box replaces the pricing table.

Select sizes

$25.00 Per Item, All Sizes

XXS
XS
SM
MD
LG
XL
1X
2X
3X

Sorry, we have a limit of 100 shirts per order. Please adjust quantities.

If you need more than 100 shirts, please call us at 1-800-627-9577 to speak to a representative about a custom order!

Add to Bag

Thumbnails

Product cards

...

Pink Photo Stylus Pen, Non Personalized

Starting at $119.00
...

TimeWise Presentation Folders

Starting at $119.00
...

True Dimensions Photo Presentation Folders

Starting at $119.00
...

Race For Red Pens, Non Personalized

Starting at $119.00
...

Party Tote Special

Starting at $119.00
...

Foundations Standing Event Banner, Personalized

Starting at $119.00
...

Skin Care Standing Event Banner, Non Personalized

Starting at $119.00
...

Foundations & NouriShine Table Runner and Table Cloths

Starting at $119.00
...

Discover What You Love Pens, Non Personalized

Starting at $119.00
...

Advanced Color Consultant White Name Tag

Starting at $119.00
...

Classic Beauty Coat

Starting at $119.00

Carousels

Homepage Carousel

Usage

<div id="hero_home_desktop" class="hero_home hidden-xs">
    <a href="#">
        <img src="..." alt="...">
    </a>
    <a href="#">
        <img src="..." alt="...">
    </a>
    <a href="#">
        <img src="..." alt="...">
    </a>
</div>

<div id="hero_home_mobile" class="hero_home hidden-sm hidden-md hidden-lg">
    <a href="#">
        <img src="..." alt="...">
    </a>
    <a href="#">
        <img src="..." alt="...">
    </a>
    <a href="#">
        <img src="..." alt="...">
    </a>
</div>

Cross-sell Carousel

You may also like

Usage

<div class="cross-sell-container">
    <h3 class="cross-sell-heading">You may also like</h3>
    <div class="cross_sell_carousel">
        <a href="#" class="thumbnail cross-sell-card">
            <img src="..." alt="...">
            <div class="caption">
                <h3 class="thumbnail-heading h5">Pink Stylus Pen, Non Personalized</h3>
                <p class="thumbnail-subheading"><em>Starting at</em> <span class="text-info text-medium">$119.00</span></p>
            </div>
        </a>
        ...
        <a href="#" class="thumbnail cross-sell-card">
            <img src="..." alt="...">
            <div class="caption">
                <h3 class="thumbnail-heading h5">Another Product with a Ridiculously Long Name</h3>
                <p class="thumbnail-subheading"><em>Starting at</em> <span class="text-info text-medium">$119.00</span></p>
            </div>
        </a>
    </div>
</div>

FontAwesome

4.4 fa-500px [&#xf26e;]
4.7 fa-address-book [&#xf2b9;]
4.7 fa-address-book-o [&#xf2ba;]
4.7 fa-address-card [&#xf2bb;]
4.7 fa-address-card-o [&#xf2bc;]
fa-adjust [&#xf042;]
fa-adn [&#xf170;]
fa-align-center [&#xf037;]
fa-align-justify [&#xf039;]
fa-align-left [&#xf036;]
fa-align-right [&#xf038;]
4.4 fa-amazon [&#xf270;]
fa-ambulance [&#xf0f9;]
4.6 fa-american-sign-language-interpreting [&#xf2a3;]
fa-anchor [&#xf13d;]
fa-android [&#xf17b;]
4.2 fa-angellist [&#xf209;]
fa-angle-double-down [&#xf103;]
fa-angle-double-left [&#xf100;]
fa-angle-double-right [&#xf101;]
fa-angle-double-up [&#xf102;]
fa-angle-down [&#xf107;]
fa-angle-left [&#xf104;]
fa-angle-right [&#xf105;]
fa-angle-up [&#xf106;]
fa-apple [&#xf179;]
fa-archive [&#xf187;]
4.2 fa-area-chart [&#xf1fe;]
fa-arrow-circle-down [&#xf0ab;]
fa-arrow-circle-left [&#xf0a8;]
fa-arrow-circle-o-down [&#xf01a;]
4.0 fa-arrow-circle-o-left [&#xf190;]
4.0 fa-arrow-circle-o-right [&#xf18e;]
fa-arrow-circle-o-up [&#xf01b;]
fa-arrow-circle-right [&#xf0a9;]
fa-arrow-circle-up [&#xf0aa;]
fa-arrow-down [&#xf063;]
fa-arrow-left [&#xf060;]
fa-arrow-right [&#xf061;]
fa-arrow-up [&#xf062;]
fa-arrows [&#xf047;]
fa-arrows-alt [&#xf0b2;]
fa-arrows-h [&#xf07e;]
fa-arrows-v [&#xf07d;]
4.6 fa-asl-interpreting (alias) [&#xf2a3;]
4.6 fa-assistive-listening-systems [&#xf2a2;]
fa-asterisk [&#xf069;]
4.2 fa-at [&#xf1fa;]
4.6 fa-audio-description [&#xf29e;]
4.1 fa-automobile (alias) [&#xf1b9;]
fa-backward [&#xf04a;]
4.4 fa-balance-scale [&#xf24e;]
fa-ban [&#xf05e;]
4.7 fa-bandcamp [&#xf2d5;]
4.1 fa-bank (alias) [&#xf19c;]
fa-bar-chart [&#xf080;]
fa-bar-chart-o (alias) [&#xf080;]
fa-barcode [&#xf02a;]
fa-bars [&#xf0c9;]
4.7 fa-bath [&#xf2cd;]
4.7 fa-bathtub (alias) [&#xf2cd;]
4.4 fa-battery (alias) [&#xf240;]
4.4 fa-battery-0 (alias) [&#xf244;]
4.4 fa-battery-1 (alias) [&#xf243;]
4.4 fa-battery-2 (alias) [&#xf242;]
4.4 fa-battery-3 (alias) [&#xf241;]
4.4 fa-battery-4 (alias) [&#xf240;]
4.4 fa-battery-empty [&#xf244;]
4.4 fa-battery-full [&#xf240;]
4.4 fa-battery-half [&#xf242;]
4.4 fa-battery-quarter [&#xf243;]
4.4 fa-battery-three-quarters [&#xf241;]
4.3 fa-bed [&#xf236;]
fa-beer [&#xf0fc;]
4.1 fa-behance [&#xf1b4;]
4.1 fa-behance-square [&#xf1b5;]
fa-bell [&#xf0f3;]
fa-bell-o [&#xf0a2;]
4.2 fa-bell-slash [&#xf1f6;]
4.2 fa-bell-slash-o [&#xf1f7;]
4.2 fa-bicycle [&#xf206;]
4.2 fa-binoculars [&#xf1e5;]
4.2 fa-birthday-cake [&#xf1fd;]
fa-bitbucket [&#xf171;]
fa-bitbucket-square [&#xf172;]
fa-bitcoin (alias) [&#xf15a;]
4.4 fa-black-tie [&#xf27e;]
4.6 fa-blind [&#xf29d;]
4.5 fa-bluetooth [&#xf293;]
4.5 fa-bluetooth-b [&#xf294;]
fa-bold [&#xf032;]
fa-bolt [&#xf0e7;]
4.1 fa-bomb [&#xf1e2;]
fa-book [&#xf02d;]
fa-bookmark [&#xf02e;]
fa-bookmark-o [&#xf097;]
4.6 fa-braille [&#xf2a1;]
fa-briefcase [&#xf0b1;]
fa-btc [&#xf15a;]
fa-bug [&#xf188;]
4.1 fa-building [&#xf1ad;]
fa-building-o [&#xf0f7;]
fa-bullhorn [&#xf0a1;]
fa-bullseye [&#xf140;]
4.2 fa-bus [&#xf207;]
4.3 fa-buysellads [&#xf20d;]
4.1 fa-cab (alias) [&#xf1ba;]
4.2 fa-calculator [&#xf1ec;]
fa-calendar [&#xf073;]
4.4 fa-calendar-check-o [&#xf274;]
4.4 fa-calendar-minus-o [&#xf272;]
fa-calendar-o [&#xf133;]
4.4 fa-calendar-plus-o [&#xf271;]
4.4 fa-calendar-times-o [&#xf273;]
fa-camera [&#xf030;]
fa-camera-retro [&#xf083;]
4.1 fa-car [&#xf1b9;]
fa-caret-down [&#xf0d7;]
fa-caret-left [&#xf0d9;]
fa-caret-right [&#xf0da;]
fa-caret-square-o-down [&#xf150;]
4.0 fa-caret-square-o-left [&#xf191;]
fa-caret-square-o-right [&#xf152;]
fa-caret-square-o-up [&#xf151;]
fa-caret-up [&#xf0d8;]
4.3 fa-cart-arrow-down [&#xf218;]
4.3 fa-cart-plus [&#xf217;]
4.2 fa-cc [&#xf20a;]
4.2 fa-cc-amex [&#xf1f3;]
4.4 fa-cc-diners-club [&#xf24c;]
4.2 fa-cc-discover [&#xf1f2;]
4.4 fa-cc-jcb [&#xf24b;]
4.2 fa-cc-mastercard [&#xf1f1;]
4.2 fa-cc-paypal [&#xf1f4;]
4.2 fa-cc-stripe [&#xf1f5;]
4.2 fa-cc-visa [&#xf1f0;]
fa-certificate [&#xf0a3;]
fa-chain (alias) [&#xf0c1;]
fa-chain-broken [&#xf127;]
fa-check [&#xf00c;]
fa-check-circle [&#xf058;]
fa-check-circle-o [&#xf05d;]
fa-check-square [&#xf14a;]
fa-check-square-o [&#xf046;]
fa-chevron-circle-down [&#xf13a;]
fa-chevron-circle-left [&#xf137;]
fa-chevron-circle-right [&#xf138;]
fa-chevron-circle-up [&#xf139;]
fa-chevron-down [&#xf078;]
fa-chevron-left [&#xf053;]
fa-chevron-right [&#xf054;]
fa-chevron-up [&#xf077;]
4.1 fa-child [&#xf1ae;]
4.4 fa-chrome [&#xf268;]
fa-circle [&#xf111;]
fa-circle-o [&#xf10c;]
4.1 fa-circle-o-notch [&#xf1ce;]
4.1 fa-circle-thin [&#xf1db;]
fa-clipboard [&#xf0ea;]
fa-clock-o [&#xf017;]
4.4 fa-clone [&#xf24d;]
fa-close (alias) [&#xf00d;]
fa-cloud [&#xf0c2;]
fa-cloud-download [&#xf0ed;]
fa-cloud-upload [&#xf0ee;]
fa-cny (alias) [&#xf157;]
fa-code [&#xf121;]
fa-code-fork [&#xf126;]
4.1 fa-codepen [&#xf1cb;]
4.5 fa-codiepie [&#xf284;]
fa-coffee [&#xf0f4;]
fa-cog [&#xf013;]
fa-cogs [&#xf085;]
fa-columns [&#xf0db;]
fa-comment [&#xf075;]
fa-comment-o [&#xf0e5;]
4.4 fa-commenting [&#xf27a;]
4.4 fa-commenting-o [&#xf27b;]
fa-comments [&#xf086;]
fa-comments-o [&#xf0e6;]
fa-compass [&#xf14e;]
fa-compress [&#xf066;]
4.3 fa-connectdevelop [&#xf20e;]
4.4 fa-contao [&#xf26d;]
fa-copy (alias) [&#xf0c5;]
4.2 fa-copyright [&#xf1f9;]
4.4 fa-creative-commons [&#xf25e;]
fa-credit-card [&#xf09d;]
4.5 fa-credit-card-alt [&#xf283;]
fa-crop [&#xf125;]
fa-crosshairs [&#xf05b;]
fa-css3 [&#xf13c;]
4.1 fa-cube [&#xf1b2;]
4.1 fa-cubes [&#xf1b3;]
fa-cut (alias) [&#xf0c4;]
fa-cutlery [&#xf0f5;]
fa-dashboard (alias) [&#xf0e4;]
4.3 fa-dashcube [&#xf210;]
4.1 fa-database [&#xf1c0;]
4.6 fa-deaf [&#xf2a4;]
4.6 fa-deafness (alias) [&#xf2a4;]
fa-dedent (alias) [&#xf03b;]
4.1 fa-delicious [&#xf1a5;]
fa-desktop [&#xf108;]
4.1 fa-deviantart [&#xf1bd;]
4.3 fa-diamond [&#xf219;]
4.1 fa-digg [&#xf1a6;]
fa-dollar (alias) [&#xf155;]
4.0 fa-dot-circle-o [&#xf192;]
fa-download [&#xf019;]
fa-dribbble [&#xf17d;]
4.7 fa-drivers-license (alias) [&#xf2c2;]
4.7 fa-drivers-license-o (alias) [&#xf2c3;]
fa-dropbox [&#xf16b;]
4.1 fa-drupal [&#xf1a9;]
4.5 fa-edge [&#xf282;]
fa-edit (alias) [&#xf044;]
4.7 fa-eercast [&#xf2da;]
fa-eject [&#xf052;]
fa-ellipsis-h [&#xf141;]
fa-ellipsis-v [&#xf142;]
4.1 fa-empire [&#xf1d1;]
fa-envelope [&#xf0e0;]
fa-envelope-o [&#xf003;]
4.7 fa-envelope-open [&#xf2b6;]
4.7 fa-envelope-open-o [&#xf2b7;]
4.1 fa-envelope-square [&#xf199;]
4.6 fa-envira [&#xf299;]
fa-eraser [&#xf12d;]
4.7 fa-etsy [&#xf2d7;]
fa-eur [&#xf153;]
fa-euro (alias) [&#xf153;]
fa-exchange [&#xf0ec;]
fa-exclamation [&#xf12a;]
fa-exclamation-circle [&#xf06a;]
fa-exclamation-triangle [&#xf071;]
fa-expand [&#xf065;]
4.4 fa-expeditedssl [&#xf23e;]
fa-external-link [&#xf08e;]
fa-external-link-square [&#xf14c;]
fa-eye [&#xf06e;]
fa-eye-slash [&#xf070;]
4.2 fa-eyedropper [&#xf1fb;]
4.6 fa-fa (alias) [&#xf2b4;]
fa-facebook [&#xf09a;]
fa-facebook-f (alias) [&#xf09a;]
4.3 fa-facebook-official [&#xf230;]
fa-facebook-square [&#xf082;]
fa-fast-backward [&#xf049;]
fa-fast-forward [&#xf050;]
4.1 fa-fax [&#xf1ac;]
fa-feed (alias) [&#xf09e;]
fa-female [&#xf182;]
fa-fighter-jet [&#xf0fb;]
fa-file [&#xf15b;]
4.1 fa-file-archive-o [&#xf1c6;]
4.1 fa-file-audio-o [&#xf1c7;]
4.1 fa-file-code-o [&#xf1c9;]
4.1 fa-file-excel-o [&#xf1c3;]
4.1 fa-file-image-o [&#xf1c5;]
4.1 fa-file-movie-o (alias) [&#xf1c8;]
fa-file-o [&#xf016;]
4.1 fa-file-pdf-o [&#xf1c1;]
4.1 fa-file-photo-o (alias) [&#xf1c5;]
4.1 fa-file-picture-o (alias) [&#xf1c5;]
4.1 fa-file-powerpoint-o [&#xf1c4;]
4.1 fa-file-sound-o (alias) [&#xf1c7;]
fa-file-text [&#xf15c;]
fa-file-text-o [&#xf0f6;]
4.1 fa-file-video-o [&#xf1c8;]
4.1 fa-file-word-o [&#xf1c2;]
4.1 fa-file-zip-o (alias) [&#xf1c6;]
fa-files-o [&#xf0c5;]
fa-film [&#xf008;]
fa-filter [&#xf0b0;]
fa-fire [&#xf06d;]
fa-fire-extinguisher [&#xf134;]
4.4 fa-firefox [&#xf269;]
4.6 fa-first-order [&#xf2b0;]
fa-flag [&#xf024;]
fa-flag-checkered [&#xf11e;]
fa-flag-o [&#xf11d;]
fa-flash (alias) [&#xf0e7;]
fa-flask [&#xf0c3;]
fa-flickr [&#xf16e;]
fa-floppy-o [&#xf0c7;]
fa-folder [&#xf07b;]
fa-folder-o [&#xf114;]
fa-folder-open [&#xf07c;]
fa-folder-open-o [&#xf115;]
fa-font [&#xf031;]
4.6 fa-font-awesome [&#xf2b4;]
4.4 fa-fonticons [&#xf280;]
4.5 fa-fort-awesome [&#xf286;]
4.3 fa-forumbee [&#xf211;]
fa-forward [&#xf04e;]
fa-foursquare [&#xf180;]
4.7 fa-free-code-camp [&#xf2c5;]
fa-frown-o [&#xf119;]
4.2 fa-futbol-o [&#xf1e3;]
fa-gamepad [&#xf11b;]
fa-gavel [&#xf0e3;]
fa-gbp [&#xf154;]
4.1 fa-ge (alias) [&#xf1d1;]
fa-gear (alias) [&#xf013;]
fa-gears (alias) [&#xf085;]
4.4 fa-genderless [&#xf22d;]
4.4 fa-get-pocket [&#xf265;]
4.4 fa-gg [&#xf260;]
4.4 fa-gg-circle [&#xf261;]
fa-gift [&#xf06b;]
4.1 fa-git [&#xf1d3;]
4.1 fa-git-square [&#xf1d2;]
fa-github [&#xf09b;]
fa-github-alt [&#xf113;]
fa-github-square [&#xf092;]
4.6 fa-gitlab [&#xf296;]
fa-gittip (alias) [&#xf184;]
fa-glass [&#xf000;]
4.6 fa-glide [&#xf2a5;]
4.6 fa-glide-g [&#xf2a6;]
fa-globe [&#xf0ac;]
4.1 fa-google [&#xf1a0;]
fa-google-plus [&#xf0d5;]
4.6 fa-google-plus-circle (alias) [&#xf2b3;]
4.6 fa-google-plus-official [&#xf2b3;]
fa-google-plus-square [&#xf0d4;]
4.2 fa-google-wallet [&#xf1ee;]
4.1 fa-graduation-cap [&#xf19d;]
fa-gratipay [&#xf184;]
4.7 fa-grav [&#xf2d6;]
fa-group (alias) [&#xf0c0;]
fa-h-square [&#xf0fd;]
4.1 fa-hacker-news [&#xf1d4;]
4.4 fa-hand-grab-o (alias) [&#xf255;]
4.4 fa-hand-lizard-o [&#xf258;]
fa-hand-o-down [&#xf0a7;]
fa-hand-o-left [&#xf0a5;]
fa-hand-o-right [&#xf0a4;]
fa-hand-o-up [&#xf0a6;]
4.4 fa-hand-paper-o [&#xf256;]
4.4 fa-hand-peace-o [&#xf25b;]
4.4 fa-hand-pointer-o [&#xf25a;]
4.4 fa-hand-rock-o [&#xf255;]
4.4 fa-hand-scissors-o [&#xf257;]
4.4 fa-hand-spock-o [&#xf259;]
4.4 fa-hand-stop-o (alias) [&#xf256;]
4.7 fa-handshake-o [&#xf2b5;]
4.6 fa-hard-of-hearing (alias) [&#xf2a4;]
4.5 fa-hashtag [&#xf292;]
fa-hdd-o [&#xf0a0;]
4.1 fa-header [&#xf1dc;]
fa-headphones [&#xf025;]
fa-heart [&#xf004;]
fa-heart-o [&#xf08a;]
4.3 fa-heartbeat [&#xf21e;]
4.1 fa-history [&#xf1da;]
fa-home [&#xf015;]
fa-hospital-o [&#xf0f8;]
4.3 fa-hotel (alias) [&#xf236;]
4.4 fa-hourglass [&#xf254;]
4.4 fa-hourglass-1 (alias) [&#xf251;]
4.4 fa-hourglass-2 (alias) [&#xf252;]
4.4 fa-hourglass-3 (alias) [&#xf253;]
4.4 fa-hourglass-end [&#xf253;]
4.4 fa-hourglass-half [&#xf252;]
4.4 fa-hourglass-o [&#xf250;]
4.4 fa-hourglass-start [&#xf251;]
4.4 fa-houzz [&#xf27c;]
fa-html5 [&#xf13b;]
4.4 fa-i-cursor [&#xf246;]
4.7 fa-id-badge [&#xf2c1;]
4.7 fa-id-card [&#xf2c2;]
4.7 fa-id-card-o [&#xf2c3;]
4.2 fa-ils [&#xf20b;]
fa-image (alias) [&#xf03e;]
4.7 fa-imdb [&#xf2d8;]
fa-inbox [&#xf01c;]
fa-indent [&#xf03c;]
4.4 fa-industry [&#xf275;]
fa-info [&#xf129;]
fa-info-circle [&#xf05a;]
fa-inr [&#xf156;]
4.6 fa-instagram [&#xf16d;]
4.1 fa-institution (alias) [&#xf19c;]
4.4 fa-internet-explorer [&#xf26b;]
4.3 fa-intersex (alias) [&#xf224;]
4.2 fa-ioxhost [&#xf208;]
fa-italic [&#xf033;]
4.1 fa-joomla [&#xf1aa;]
fa-jpy [&#xf157;]
4.1 fa-jsfiddle [&#xf1cc;]
fa-key [&#xf084;]
fa-keyboard-o [&#xf11c;]
fa-krw [&#xf159;]
4.1 fa-language [&#xf1ab;]
fa-laptop [&#xf109;]
4.2 fa-lastfm [&#xf202;]
4.2 fa-lastfm-square [&#xf203;]
fa-leaf [&#xf06c;]
4.3 fa-leanpub [&#xf212;]
fa-legal (alias) [&#xf0e3;]
fa-lemon-o [&#xf094;]
fa-level-down [&#xf149;]
fa-level-up [&#xf148;]
4.1 fa-life-bouy (alias) [&#xf1cd;]
4.1 fa-life-buoy (alias) [&#xf1cd;]
4.1 fa-life-ring [&#xf1cd;]
4.1 fa-life-saver (alias) [&#xf1cd;]
fa-lightbulb-o [&#xf0eb;]
4.2 fa-line-chart [&#xf201;]
fa-link [&#xf0c1;]
fa-linkedin [&#xf0e1;]
fa-linkedin-square [&#xf08c;]
4.7 fa-linode [&#xf2b8;]
fa-linux [&#xf17c;]
fa-list [&#xf03a;]
fa-list-alt [&#xf022;]
fa-list-ol [&#xf0cb;]
fa-list-ul [&#xf0ca;]
fa-location-arrow [&#xf124;]
fa-lock [&#xf023;]
fa-long-arrow-down [&#xf175;]
fa-long-arrow-left [&#xf177;]
fa-long-arrow-right [&#xf178;]
fa-long-arrow-up [&#xf176;]
4.6 fa-low-vision [&#xf2a8;]
fa-magic [&#xf0d0;]
fa-magnet [&#xf076;]
fa-mail-forward (alias) [&#xf064;]
fa-mail-reply (alias) [&#xf112;]
fa-mail-reply-all (alias) [&#xf122;]
fa-male [&#xf183;]
4.4 fa-map [&#xf279;]
fa-map-marker [&#xf041;]
4.4 fa-map-o [&#xf278;]
4.4 fa-map-pin [&#xf276;]
4.4 fa-map-signs [&#xf277;]
4.3 fa-mars [&#xf222;]
4.3 fa-mars-double [&#xf227;]
4.3 fa-mars-stroke [&#xf229;]
4.3 fa-mars-stroke-h [&#xf22b;]
4.3 fa-mars-stroke-v [&#xf22a;]
fa-maxcdn [&#xf136;]
4.2 fa-meanpath [&#xf20c;]
4.3 fa-medium [&#xf23a;]
fa-medkit [&#xf0fa;]
4.7 fa-meetup [&#xf2e0;]
fa-meh-o [&#xf11a;]
4.3 fa-mercury [&#xf223;]
4.7 fa-microchip [&#xf2db;]
fa-microphone [&#xf130;]
fa-microphone-slash [&#xf131;]
fa-minus [&#xf068;]
fa-minus-circle [&#xf056;]
fa-minus-square [&#xf146;]
fa-minus-square-o [&#xf147;]
4.5 fa-mixcloud [&#xf289;]
fa-mobile [&#xf10b;]
fa-mobile-phone (alias) [&#xf10b;]
4.5 fa-modx [&#xf285;]
fa-money [&#xf0d6;]
fa-moon-o [&#xf186;]
4.1 fa-mortar-board (alias) [&#xf19d;]
4.3 fa-motorcycle [&#xf21c;]
4.4 fa-mouse-pointer [&#xf245;]
fa-music [&#xf001;]
fa-navicon (alias) [&#xf0c9;]
4.3 fa-neuter [&#xf22c;]
4.2 fa-newspaper-o [&#xf1ea;]
4.4 fa-object-group [&#xf247;]
4.4 fa-object-ungroup [&#xf248;]
4.4 fa-odnoklassniki [&#xf263;]
4.4 fa-odnoklassniki-square [&#xf264;]
4.4 fa-opencart [&#xf23d;]
4.1 fa-openid [&#xf19b;]
4.4 fa-opera [&#xf26a;]
4.4 fa-optin-monster [&#xf23c;]
fa-outdent [&#xf03b;]
4.0 fa-pagelines [&#xf18c;]
4.2 fa-paint-brush [&#xf1fc;]
4.1 fa-paper-plane [&#xf1d8;]
4.1 fa-paper-plane-o [&#xf1d9;]
fa-paperclip [&#xf0c6;]
4.1 fa-paragraph [&#xf1dd;]
fa-paste (alias) [&#xf0ea;]
fa-pause [&#xf04c;]
4.5 fa-pause-circle [&#xf28b;]
4.5 fa-pause-circle-o [&#xf28c;]
4.1 fa-paw [&#xf1b0;]
4.2 fa-paypal [&#xf1ed;]
fa-pencil [&#xf040;]
fa-pencil-square [&#xf14b;]
fa-pencil-square-o [&#xf044;]
4.5 fa-percent [&#xf295;]
fa-phone [&#xf095;]
fa-phone-square [&#xf098;]
fa-photo (alias) [&#xf03e;]
fa-picture-o [&#xf03e;]
4.2 fa-pie-chart [&#xf200;]
4.6 fa-pied-piper [&#xf2ae;]
4.1 fa-pied-piper-alt [&#xf1a8;]
4.1 fa-pied-piper-pp [&#xf1a7;]
fa-pinterest [&#xf0d2;]
4.3 fa-pinterest-p [&#xf231;]
fa-pinterest-square [&#xf0d3;]
fa-plane [&#xf072;]
fa-play [&#xf04b;]
fa-play-circle [&#xf144;]
fa-play-circle-o [&#xf01d;]
4.2 fa-plug [&#xf1e6;]
fa-plus [&#xf067;]
fa-plus-circle [&#xf055;]
fa-plus-square [&#xf0fe;]
4.0 fa-plus-square-o [&#xf196;]
4.7 fa-podcast [&#xf2ce;]
fa-power-off [&#xf011;]
fa-print [&#xf02f;]
4.5 fa-product-hunt [&#xf288;]
fa-puzzle-piece [&#xf12e;]
4.1 fa-qq [&#xf1d6;]
fa-qrcode [&#xf029;]
fa-question [&#xf128;]
fa-question-circle [&#xf059;]
4.6 fa-question-circle-o [&#xf29c;]
4.7 fa-quora [&#xf2c4;]
fa-quote-left [&#xf10d;]
fa-quote-right [&#xf10e;]
4.1 fa-ra (alias) [&#xf1d0;]
fa-random [&#xf074;]
4.7 fa-ravelry [&#xf2d9;]
4.1 fa-rebel [&#xf1d0;]
4.1 fa-recycle [&#xf1b8;]
4.1 fa-reddit [&#xf1a1;]
4.5 fa-reddit-alien [&#xf281;]
4.1 fa-reddit-square [&#xf1a2;]
fa-refresh [&#xf021;]
4.4 fa-registered [&#xf25d;]
fa-remove (alias) [&#xf00d;]
fa-renren [&#xf18b;]
fa-reorder (alias) [&#xf0c9;]
fa-repeat [&#xf01e;]
fa-reply [&#xf112;]
fa-reply-all [&#xf122;]
4.1 fa-resistance (alias) [&#xf1d0;]
fa-retweet [&#xf079;]
fa-rmb (alias) [&#xf157;]
fa-road [&#xf018;]
fa-rocket [&#xf135;]
fa-rotate-left (alias) [&#xf0e2;]
fa-rotate-right (alias) [&#xf01e;]
4.0 fa-rouble (alias) [&#xf158;]
fa-rss [&#xf09e;]
fa-rss-square [&#xf143;]
4.0 fa-rub [&#xf158;]
4.0 fa-ruble (alias) [&#xf158;]
fa-rupee (alias) [&#xf156;]
4.7 fa-s15 (alias) [&#xf2cd;]
4.4 fa-safari [&#xf267;]
fa-save (alias) [&#xf0c7;]
fa-scissors [&#xf0c4;]
4.5 fa-scribd [&#xf28a;]
fa-search [&#xf002;]
fa-search-minus [&#xf010;]
fa-search-plus [&#xf00e;]
4.3 fa-sellsy [&#xf213;]
4.1 fa-send (alias) [&#xf1d8;]
4.1 fa-send-o (alias) [&#xf1d9;]
4.3 fa-server [&#xf233;]
fa-share [&#xf064;]
4.1 fa-share-alt [&#xf1e0;]
4.1 fa-share-alt-square [&#xf1e1;]
fa-share-square [&#xf14d;]
fa-share-square-o [&#xf045;]
4.2 fa-shekel (alias) [&#xf20b;]
4.2 fa-sheqel (alias) [&#xf20b;]
fa-shield [&#xf132;]
4.3 fa-ship [&#xf21a;]
4.3 fa-shirtsinbulk [&#xf214;]
4.5 fa-shopping-bag [&#xf290;]
4.5 fa-shopping-basket [&#xf291;]
fa-shopping-cart [&#xf07a;]
4.7 fa-shower [&#xf2cc;]
fa-sign-in [&#xf090;]
4.6 fa-sign-language [&#xf2a7;]
fa-sign-out [&#xf08b;]
fa-signal [&#xf012;]
4.6 fa-signing (alias) [&#xf2a7;]
4.3 fa-simplybuilt [&#xf215;]
fa-sitemap [&#xf0e8;]
4.3 fa-skyatlas [&#xf216;]
fa-skype [&#xf17e;]
4.1 fa-slack [&#xf198;]
4.1 fa-sliders [&#xf1de;]
4.2 fa-slideshare [&#xf1e7;]
fa-smile-o [&#xf118;]
4.6 fa-snapchat [&#xf2ab;]
4.6 fa-snapchat-ghost [&#xf2ac;]
4.6 fa-snapchat-square [&#xf2ad;]
4.7 fa-snowflake-o [&#xf2dc;]
4.2 fa-soccer-ball-o (alias) [&#xf1e3;]
fa-sort [&#xf0dc;]
fa-sort-alpha-asc [&#xf15d;]
fa-sort-alpha-desc [&#xf15e;]
fa-sort-amount-asc [&#xf160;]
fa-sort-amount-desc [&#xf161;]
fa-sort-asc [&#xf0de;]
fa-sort-desc [&#xf0dd;]
fa-sort-down (alias) [&#xf0dd;]
fa-sort-numeric-asc [&#xf162;]
fa-sort-numeric-desc [&#xf163;]
fa-sort-up (alias) [&#xf0de;]
4.1 fa-soundcloud [&#xf1be;]
4.1 fa-space-shuttle [&#xf197;]
fa-spinner [&#xf110;]
4.1 fa-spoon [&#xf1b1;]
4.1 fa-spotify [&#xf1bc;]
fa-square [&#xf0c8;]
fa-square-o [&#xf096;]
4.0 fa-stack-exchange [&#xf18d;]
fa-stack-overflow [&#xf16c;]
fa-star [&#xf005;]
fa-star-half [&#xf089;]
fa-star-half-empty (alias) [&#xf123;]
fa-star-half-full (alias) [&#xf123;]
fa-star-half-o [&#xf123;]
fa-star-o [&#xf006;]
4.1 fa-steam [&#xf1b6;]
4.1 fa-steam-square [&#xf1b7;]
fa-step-backward [&#xf048;]
fa-step-forward [&#xf051;]
fa-stethoscope [&#xf0f1;]
4.4 fa-sticky-note [&#xf249;]
4.4 fa-sticky-note-o [&#xf24a;]
fa-stop [&#xf04d;]
4.5 fa-stop-circle [&#xf28d;]
4.5 fa-stop-circle-o [&#xf28e;]
4.3 fa-street-view [&#xf21d;]
fa-strikethrough [&#xf0cc;]
4.1 fa-stumbleupon [&#xf1a4;]
4.1 fa-stumbleupon-circle [&#xf1a3;]
fa-subscript [&#xf12c;]
4.3 fa-subway [&#xf239;]
fa-suitcase [&#xf0f2;]
fa-sun-o [&#xf185;]
4.7 fa-superpowers [&#xf2dd;]
fa-superscript [&#xf12b;]
4.1 fa-support (alias) [&#xf1cd;]
fa-table [&#xf0ce;]
fa-tablet [&#xf10a;]
fa-tachometer [&#xf0e4;]
fa-tag [&#xf02b;]
fa-tags [&#xf02c;]
fa-tasks [&#xf0ae;]
4.1 fa-taxi [&#xf1ba;]
4.7 fa-telegram [&#xf2c6;]
4.4 fa-television [&#xf26c;]
4.1 fa-tencent-weibo [&#xf1d5;]
fa-terminal [&#xf120;]
fa-text-height [&#xf034;]
fa-text-width [&#xf035;]
fa-th [&#xf00a;]
fa-th-large [&#xf009;]
fa-th-list [&#xf00b;]
4.6 fa-themeisle [&#xf2b2;]
4.7 fa-thermometer (alias) [&#xf2c7;]
4.7 fa-thermometer-0 (alias) [&#xf2cb;]
4.7 fa-thermometer-1 (alias) [&#xf2ca;]
4.7 fa-thermometer-2 (alias) [&#xf2c9;]
4.7 fa-thermometer-3 (alias) [&#xf2c8;]
4.7 fa-thermometer-4 (alias) [&#xf2c7;]
4.7 fa-thermometer-empty [&#xf2cb;]
4.7 fa-thermometer-full [&#xf2c7;]
4.7 fa-thermometer-half [&#xf2c9;]
4.7 fa-thermometer-quarter [&#xf2ca;]
4.7 fa-thermometer-three-quarters [&#xf2c8;]
fa-thumb-tack [&#xf08d;]
fa-thumbs-down [&#xf165;]
fa-thumbs-o-down [&#xf088;]
fa-thumbs-o-up [&#xf087;]
fa-thumbs-up [&#xf164;]
fa-ticket [&#xf145;]
fa-times [&#xf00d;]
fa-times-circle [&#xf057;]
fa-times-circle-o [&#xf05c;]
4.7 fa-times-rectangle (alias) [&#xf2d3;]
4.7 fa-times-rectangle-o (alias) [&#xf2d4;]
fa-tint [&#xf043;]
fa-toggle-down (alias) [&#xf150;]
4.0 fa-toggle-left (alias) [&#xf191;]
4.2 fa-toggle-off [&#xf204;]
4.2 fa-toggle-on [&#xf205;]
fa-toggle-right (alias) [&#xf152;]
fa-toggle-up (alias) [&#xf151;]
4.4 fa-trademark [&#xf25c;]
4.3 fa-train [&#xf238;]
4.3 fa-transgender [&#xf224;]
4.3 fa-transgender-alt [&#xf225;]
4.2 fa-trash [&#xf1f8;]
fa-trash-o [&#xf014;]
4.1 fa-tree [&#xf1bb;]
fa-trello [&#xf181;]
4.4 fa-tripadvisor [&#xf262;]
fa-trophy [&#xf091;]
fa-truck [&#xf0d1;]
4.0 fa-try [&#xf195;]
4.2 fa-tty [&#xf1e4;]
fa-tumblr [&#xf173;]
fa-tumblr-square [&#xf174;]
4.0 fa-turkish-lira (alias) [&#xf195;]
4.4 fa-tv (alias) [&#xf26c;]
4.2 fa-twitch [&#xf1e8;]
fa-twitter [&#xf099;]
fa-twitter-square [&#xf081;]
fa-umbrella [&#xf0e9;]
fa-underline [&#xf0cd;]
fa-undo [&#xf0e2;]
4.6 fa-universal-access [&#xf29a;]
4.1 fa-university [&#xf19c;]
fa-unlink (alias) [&#xf127;]
fa-unlock [&#xf09c;]
fa-unlock-alt [&#xf13e;]
fa-unsorted (alias) [&#xf0dc;]
fa-upload [&#xf093;]
4.5 fa-usb [&#xf287;]
fa-usd [&#xf155;]
fa-user [&#xf007;]
4.7 fa-user-circle [&#xf2bd;]
4.7 fa-user-circle-o [&#xf2be;]
fa-user-md [&#xf0f0;]
4.7 fa-user-o [&#xf2c0;]
4.3 fa-user-plus [&#xf234;]
4.3 fa-user-secret [&#xf21b;]
4.3 fa-user-times [&#xf235;]
fa-users [&#xf0c0;]
4.7 fa-vcard (alias) [&#xf2bb;]
4.7 fa-vcard-o (alias) [&#xf2bc;]
4.3 fa-venus [&#xf221;]
4.3 fa-venus-double [&#xf226;]
4.3 fa-venus-mars [&#xf228;]
4.3 fa-viacoin [&#xf237;]
4.6 fa-viadeo [&#xf2a9;]
4.6 fa-viadeo-square [&#xf2aa;]
fa-video-camera [&#xf03d;]
4.4 fa-vimeo [&#xf27d;]
4.0 fa-vimeo-square [&#xf194;]
4.1 fa-vine [&#xf1ca;]
fa-vk [&#xf189;]
4.6 fa-volume-control-phone [&#xf2a0;]
fa-volume-down [&#xf027;]
fa-volume-off [&#xf026;]
fa-volume-up [&#xf028;]
fa-warning (alias) [&#xf071;]
4.1 fa-wechat (alias) [&#xf1d7;]
fa-weibo [&#xf18a;]
4.1 fa-weixin [&#xf1d7;]
4.3 fa-whatsapp [&#xf232;]
4.0 fa-wheelchair [&#xf193;]
4.6 fa-wheelchair-alt [&#xf29b;]
4.2 fa-wifi [&#xf1eb;]
4.4 fa-wikipedia-w [&#xf266;]
4.7 fa-window-close [&#xf2d3;]
4.7 fa-window-close-o [&#xf2d4;]
4.7 fa-window-maximize [&#xf2d0;]
4.7 fa-window-minimize [&#xf2d1;]
4.7 fa-window-restore [&#xf2d2;]
fa-windows [&#xf17a;]
fa-won (alias) [&#xf159;]
4.1 fa-wordpress [&#xf19a;]
4.6 fa-wpbeginner [&#xf297;]
4.7 fa-wpexplorer [&#xf2de;]
4.6 fa-wpforms [&#xf298;]
fa-wrench [&#xf0ad;]
fa-xing [&#xf168;]
fa-xing-square [&#xf169;]
4.4 fa-y-combinator [&#xf23b;]
4.1 fa-y-combinator-square (alias) [&#xf1d4;]
4.1 fa-yahoo [&#xf19e;]
4.4 fa-yc (alias) [&#xf23b;]
4.1 fa-yc-square (alias) [&#xf1d4;]
4.2 fa-yelp [&#xf1e9;]
fa-yen (alias) [&#xf157;]
4.6 fa-yoast [&#xf2b1;]
fa-youtube [&#xf167;]
fa-youtube-play [&#xf16a;]
fa-youtube-square [&#xf166;]