Typography
Icons fonts
Icon font take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font for a faster loading time than images, scalability and endless variations using CSS.
How to use
All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
- <i class="icon-search icon-white"></i>
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Custom icons set
We used Fontello to provide a set of custom fonts for UI and social media. You can easily add more icons from this amazing tool. More info at http://fontello.com/
- icon-plus0x2b
- icon-minus0x2d
- icon-left0x2190
- icon-up0x2191
- icon-right0x2192
- icon-down0x2193
- icon-home0x2302
- icon-pause0x2389
- icon-fast-fw0x23e9
- icon-fast-bw0x23ea
- icon-to-end0x23ed
- icon-to-start0x23ee
- icon-stop0x25aa
- icon-up-dir0x25b4
- icon-play0x25b6
- icon-right-dir0x25b8
- icon-down-dir0x25be
- icon-left-dir0x25c2
- icon-cloud0x2601
- icon-umbrella0x2602
- icon-star0x2605
- icon-star-empty0x2606
- icon-check0x2611
- icon-left-hand0x261c
- icon-up-hand0x261d
- icon-right-hand0x261e
- icon-down-hand0x261f
- icon-th-list0x2630
- icon-heart-empty0x2661
- icon-heart0x2665
- icon-music0x266b
- icon-th0x268f
- icon-flag0x2691
- icon-cog0x2699
- icon-attention0x26a0
- icon-flash0x26a1
- icon-cog-alt0x26ef
- icon-scissors0x2702
- icon-flight0x2708
- icon-mail0x2709
- icon-edit0x270d
- icon-pencil0x270e
- icon-ok0x2713
- icon-ok-circle0x2714
- icon-cancel0x2715
- icon-cancel-circle0x2716
- icon-asterisk0x2731
- icon-attention-circle0x2757
- icon-plus-circle0x2795
- icon-minus-circle0x2796
- icon-forward0x27a6
- icon-ccw0x27f2
- icon-cw0x27f3
- icon-resize-vertical0x2b0c
- icon-resize-horizontal0x2b0d
- icon-eject0x2ecf
- icon-left-circle0xe4a1
- icon-right-circle0xe4a2
- icon-up-circle0xe4a3
- icon-down-circle0xe4a4
- icon-star-half0xe701
- icon-ok-circle20xe702
- icon-cancel-circle20xe703
- icon-help-circle0xe704
- icon-info-circle0xe705
- icon-th-large0xe708
- icon-eye0xe70a
- icon-eye-off0xe70b
- icon-tag0xe70c
- icon-tag-10xe801
- icon-tags0xe70d
- icon-camera-alt0xe70f
- icon-export0xe715
- icon-print0xe716
- icon-retweet0xe717
- icon-comment0xe718
- icon-comment-10xe803
- icon-chat-10xe720
- icon-location0xe724
- icon-trash0xe729
- icon-rss0xe73a
- icon-basket0xe73d
- icon-login0xe740
- icon-logout0xe741
- icon-resize-full0xe744
- icon-resize-small0xe746
- icon-zoom-in0xe750
- icon-zoom-out0xe751
- icon-down-circle20xe758
- icon-up-circle20xe75b
- icon-down-open0xe75c
- icon-left-open0xe75d
- icon-right-open0xe75e
- icon-up-open0xe75f
- icon-arrows-cw0xe760
- icon-play-circle20xe761
- icon-to-end-alt0xe762
- icon-to-start-alt0xe763
- icon-inbox0xe777
- icon-font0xe779
- icon-bold0xe77a
- icon-italic0xe77b
- icon-text-height0xe77c
- icon-text-width0xe77d
- icon-align-left0xe77e
- icon-align-center0xe77f
- icon-align-right0xe780
- icon-align-justify0xe781
- icon-list0xe782
- icon-indent-left0xe783
- icon-indent-right0xe784
- icon-off0xe78e
- icon-road0xe78f
- icon-list-alt0xe790
- icon-qrcode0xe791
- icon-barcode0xe792
- icon-ajust0xe793
- icon-tint0xe794
- icon-magnet0xe7a1
- icon-move0xf047
- icon-link-ext0xf08e
- icon-check-empty0xf096
- icon-bookmark-empty0xf097
- icon-phone-squared0xf098
- icon-twitter0xf099
- icon-rss-10xf09e
- icon-hdd0xf0a0
- icon-certificate0xf0a3
- icon-left-circled0xf0a8
- icon-right-circled0xf0a9
- icon-up-circled0xf0aa
- icon-down-circled0xf0ab
- icon-tasks0xf0ae
- icon-filter0xf0b0
- icon-resize-full-alt0xf0b2
- icon-beaker0xf0c3
- icon-docs0xf0c5
- icon-blank0xf0c8
- icon-menu0xf0c9
- icon-list-bullet0xf0ca
- icon-list-numbered0xf0cb
- icon-strike0xf0cc
- icon-underline0xf0cd
- icon-table0xf0ce
- icon-magic0xf0d0
- icon-pinterest-circled0xf0d2
- icon-gplus0xf0d5
- icon-money0xf0d6
- icon-columns0xf0db
- icon-sort0xf0dc
- icon-sort-down0xf0dd
- icon-sort-up0xf0de
- icon-mail-alt0xf0e0
- icon-gauge0xf0e4
- icon-comment-20xf0e5
- icon-chat0xf0e6
- icon-sitemap0xf0e8
- icon-paste0xf0ea
- icon-user-md0xf200
- icon-facebook0xf300
- icon-twitter-bird0xf303
- icon-icq0xf304
- icon-yandex0xf305
- icon-github0xf308
- icon-skype0xf30b
- icon-odnoklassniki0xf30c
- icon-vimeo0xf30f
- icon-tumblr0xf311
- icon-friendfeed0xf312
- icon-blogger0xf314
- icon-deviantart0xf316
- icon-jabber0xf317
- icon-lastfm0xf318
- icon-linkedin0xf31a
- icon-picasa0xf31c
- icon-wordpress0xf31d
- icon-instagram0xf31e
- icon-picture0x1f304
- icon-globe0x1f30e
- icon-leaf0x1f342
- icon-lemon0x1f34b
- icon-glass0x1f378
- icon-gift0x1f381
- icon-videocam0x1f3a5
- icon-headphones0x1f3a7
- icon-video0x1f3ac
- icon-target0x1f3af
- icon-award0x1f3c9
- icon-thumbs-up0x1f44d
- icon-thumbs-down0x1f44e
- icon-user-10xe800
- icon-user0x1f464
- icon-users0x1f465
- icon-credit-card0x1f4b3
- icon-briefcase0x1f4bc
- icon-floppy0x1f4be
- icon-folder0x1f4c1
- icon-folder-open0x1f4c2
- icon-doc0x1f4c4
- icon-calendar0x1f4c5
- icon-chart-bar0x1f4ca
- icon-pin0x1f4cc
- icon-attach0x1f4ce
- icon-book0x1f4d5
- icon-phone0x1f4de
- icon-megaphone0x1f4e3
- icon-upload0x1f4e4
- icon-download0x1f4e5
- icon-signal0x1f4f6
- icon-camera0x1f4f7
- icon-shuffle0x1f500
- icon-volume-off0x1f507
- icon-volume-down0x1f509
- icon-volume-up0x1f50a
- icon-search0x1f50d
- icon-key0x1f511
- icon-lock0x1f512
- icon-lock-open0x1f513
- icon-bell0x1f514
- icon-bookmark0x1f516
- icon-link0x1f517
- icon-fire0x1f525
- icon-wrench0x1f527
- icon-hammer0x1f528
- icon-clock-10xe802
- icon-clock0x1f554
- icon-truck0x1f69a
- icon-block0x1f6ab