Icons

Variations

This is a normal icon.

1This is a normal <i class="ICONCLASS"></i> icon.

This is a default round icon, and here's icons with the semantic classes added. You can use any icon with these. They just change background color.

1<i class="icn-round ICONCLASS"></i>
2<i class="icn-round icn-info ICONCLASS"></i>
3<i class="icn-round icn-error ICONCLASS"></i>
4<i class="icn-round icn-success ICONCLASS"></i>
5<i class="icn-round icn-warning ICONCLASS"></i>

You can also create small versions of round icons by adding a class of "small", like this: .

1<i class="icn-round icn-small ICONCLASS"></i>
2<i class="icn-round icn-small icn-info ICONCLASS"></i>
3<i class="icn-round icn-small icn-error ICONCLASS"></i>
4<i class="icn-round icn-small icn-success ICONCLASS"></i>
5<i class="icn-round icn-small icn-warning ICONCLASS"></i>

Jump to Font Awesome

Glyphicons

This gem includes icons as a font, png and svg from Glyphicons. Insert an icon using this syntax: <i class="glyphicons ICON_NAME"></i>. You can change the size of the icon by setting the font-size.

glass leaf dog user girl car user_add user_remove film magic envelope camera heart beach_umbrella train print bin music note heart_empty home snowflake fire magnet parents binoculars road search cars notes_2 pencil bus wifi_alt luggage old_man woman file coins airplane notes stats charts pie_chart group keys calendar router camera_small dislikes star link eye_open eye_close alarm clock stopwatch projector history truck cargo compass keynote paperclip power lightbulb tag tags cleaning ruller gift umbrella book bookmark wifi cup stroller headphones headset warning_sign signal retweet refresh roundabout random heat repeat display log_book address_book building eyedropper adjust tint crop vector_path_square vector_path_circle vector_path_polygon vector_path_line vector_path_curve vector_path_all font italic bold text_underline text_strike text_height text_width text_resize left_indent right_indent align_left align_center align_right justify list_icon text_smaller text_bigger embed embed_close table message_full message_empty message_in message_out message_plus message_minus message_ban message_flag message_lock message_new inbox inbox_plus inbox_minus inbox_lock inbox_in inbox_out cogwheel cogwheels picture adjust_alt database_lock database_plus database_minus database_ban folder_open folder_plus folder_minus folder_lock folder_flag folder_new edit new_window check unchecked more_windows show_big_thumbnails show_thumbnails show_thumbnails_with_lines show_lines playlist imac macbook ipad iphone iphone_transfer iphone_exchange ipod ipod_shuffle ear_plugs record step_backward fast_backward rewind play pause stop forward fast_forward step_forward eject facetime_video download_alt mute volume_down volume_up screenshot move more brightness_reduce brightness_increase circle_plus circle_minus circle_remove circle_ok circle_question_mark circle_info circle_exclamation_mark remove ok ban download upload shopping_cart lock unlock electricity ok_2 remove_2 cart_out cart_in left_arrow right_arrow down_arrow up_arrow resize_small resize_full circle_arrow_left circle_arrow_right circle_arrow_top circle_arrow_down play_button unshare share chevron- right chevron- left bluetooth euro usd gbp retweet_2 moon sun cloud direction brush pen zoom_in zoom_out pin albums rotation_lock flash google_maps anchor conversation chat male female asterisk divide snorkel_diving scuba_diving oxygen_bottle fins fishes boat delete sheriffs_star qrcode barcode pool buoy spade bank vcard electrical_plug flag credit_card keyboard- wireless keyboard- wired shield ring cake drink beer fast_food cutlery pizza birthday_cake tablet settings bullets cardio t- shirt pants sweater fabric leather scissors bomb skull celebration tea_kettle french_press coffe_cup pot grater kettle hospital hospital_h microphone webcam temple_christianity_church temple_islam temple_hindu temple_buddhist bicycle life_preserver share_alt comments flower baseball rugby ax table_tennis bowling tree_conifer tree_deciduous more_items sort filter gamepad playing_dices calculator tie wallet piano sampler podium soccer_ball blog dashboard certificate bell candle pushpin iphone_shake pin_flag turtle rabbit globe briefcase hdd thumbs_up thumbs_down hand_right hand_left hand_up hand_down fullscreen shopping_bag book_open nameplate nameplate_alt vases bullhorn dumbbell suitcase file_import file_export bug crown smoking cloud- upload cloud- download restart security_camera expand collapse collapse_top globe_af global spray nails claw_hammer classic_hammer hand_saw riflescope electrical_socket_eu electrical_socket_us message_forward coat_hanger dress bathrobe shirt underwear log_in log_out exit new_window_alt video_sd video_hd subtitles sound_stereo sound_dolby sound_5_1 sound_6_1 sound_7_1 copyright_mark registration_mark radar skateboard golf_course sorting sort-by- alphabet sort-by-alphabet- alt sort-by- order sort-by-order- alt sort-by- attributes sort-by-attributes- alt compressed package cloud_plus cloud_minus disk_save disk_open disk_saved disk_remove disk_import disk_export tower send git_branch git_create git_private git_delete git_merge git_pull_request git_compare git_commit construction_cone shoe_steps plus minus redo undo golf hockey pipe wrench folder_closed phone_alt earphone floppy_disk floppy_saved floppy_remove floppy_save floppy_open translate fax factory shop_window shop kiosk kiosk_wheels kiosk_light kiosk_food transfer money header blacksmith saw_blade basketball server server_plus server_minus server_ban server_flag server_lock server_new


Font Awesome

This gem also includes icons as a font, png and svg from Font Awesome. Insert an icon using this syntax: <i class="ICON_NAME"></i>. You can change the size of the icon by setting the font-size.

You can also animate the Font Awesome icons, causing them to spin by adding .spin-me and .icn-round to one of the icons below like so: Spinning

icon-glass icon-music icon-search icon-envelope-alt icon-heart icon-star icon-star-empty icon-user icon-film icon-th-large icon-th icon-th-list icon-ok icon-remove icon-zoom-in icon-zoom-out icon-power-off icon-off icon-signal icon-gear icon-cog icon-trash icon-home icon-file-alt icon-time icon-road icon-download-alt icon-download icon-upload icon-inbox icon-play-circle icon-rotate-right icon-repeat icon-refresh icon-list-alt icon-lock icon-flag icon-headphones icon-volume-off icon-volume-down icon-volume-up icon-qrcode icon-barcode icon-tag icon-tags icon-book icon-bookmark icon-print icon-camera icon-font icon-bold icon-italic icon-text-height icon-text-width icon-align-left icon-align-center icon-align-right icon-align-justify icon-list icon-indent-left icon-indent-right icon-facetime-video icon-picture icon-pencil icon-map-marker icon-adjust icon-tint icon-edit icon-share icon-check icon-move icon-step-backward icon-fast-backward icon-backward icon-play icon-pause icon-stop icon-forward icon-fast-forward icon-step-forward icon-eject icon-chevron-left icon-chevron-right icon-plus-sign icon-minus-sign icon-remove-sign icon-ok-sign icon-question-sign icon-info-sign icon-screenshot icon-remove-circle icon-ok-circle icon-ban-circle icon-arrow-left icon-arrow-right icon-arrow-up icon-arrow-down icon-mail-forward icon-share-alt icon-resize-full icon-resize-small icon-plus icon-minus icon-asterisk icon-exclamation-sign icon-gift icon-leaf icon-fire icon-eye-open icon-eye-close icon-warning-sign icon-plane icon-calendar icon-random icon-comment icon-magnet icon-chevron-up icon-chevron-down icon-retweet icon-shopping-cart icon-folder-close icon-folder-open icon-resize-vertical icon-resize-horizontal icon-bar-chart icon-twitter-sign icon-facebook-sign icon-camera-retro icon-key icon-gears icon-cogs icon-comments icon-thumbs-up-alt icon-thumbs-down-alt icon-star-half icon-heart-empty icon-signout icon-linkedin-sign icon-pushpin icon-external-link icon-signin icon-trophy icon-github-sign icon-upload-alt icon-lemon icon-phone icon-unchecked icon-check-empty icon-bookmark-empty icon-phone-sign icon-twitter icon-facebook icon-github icon-unlock icon-credit-card icon-rss icon-hdd icon-bullhorn icon-bell icon-certificate icon-hand-right icon-hand-left icon-hand-up icon-hand-down icon-circle-arrow-left icon-circle-arrow-right icon-circle-arrow-up icon-circle-arrow-down icon-globe icon-wrench icon-tasks icon-filter icon-briefcase icon-fullscreen icon-group icon-link icon-cloud icon-beaker icon-cut icon-copy icon-paperclip icon-paper-clip icon-save icon-sign-blank icon-reorder icon-list-ul icon-list-ol icon-strikethrough icon-underline icon-table icon-magic icon-truck icon-pinterest icon-pinterest-sign icon-google-plus-sign icon-google-plus icon-money icon-caret-down icon-caret-up icon-caret-left icon-caret-right icon-columns icon-sort icon-sort-down icon-sort-up icon-envelope icon-linkedin icon-rotate-left icon-undo icon-legal icon-dashboard icon-comment-alt icon-comments-alt icon-bolt icon-sitemap icon-umbrella icon-paste icon-lightbulb icon-exchange icon-cloud-download icon-cloud-upload icon-user-md icon-stethoscope icon-suitcase icon-bell-alt icon-coffee icon-food icon-file-text-alt icon-building icon-hospital icon-ambulance icon-medkit icon-fighter-jet icon-beer icon-h-sign icon-plus-sign-alt icon-double-angle-left icon-double-angle-right icon-double-angle-up icon-double-angle-down icon-angle-left icon-angle-right icon-angle-up icon-angle-down icon-desktop icon-laptop icon-tablet icon-mobile-phone icon-circle-blank icon-quote-left icon-quote-right icon-spinner icon-circle icon-mail-reply icon-reply icon-github-alt icon-folder-close-alt icon-folder-open-alt icon-expand-alt icon-collapse-alt icon-smile icon-frown icon-meh icon-gamepad icon-keyboard icon-flag-alt icon-flag-checkered icon-terminal icon-code icon-reply-all icon-mail-reply-all icon-star-half-full icon-star-half-empty icon-location-arrow icon-crop icon-code-fork icon-unlink icon-question icon-info icon-exclamation icon-superscript icon-subscript icon-eraser icon-puzzle-piece icon-microphone icon-microphone-off icon-shield icon-calendar-empty icon-fire-extinguisher icon-rocket icon-maxcdn icon-chevron-sign-left icon-chevron-sign-right icon-chevron-sign-up icon-chevron-sign-down icon-html5 icon-css3 icon-anchor icon-unlock-alt icon-bullseye icon-ellipsis-horizontal icon-ellipsis-vertical icon-rss-sign icon-play-sign icon-ticket icon-minus-sign-alt icon-check-minus icon-level-up icon-level-down icon-check-sign icon-edit-sign icon-external-link-sign icon-share-sign icon-compass icon-collapse icon-collapse-top icon-expand icon-euro icon-eur icon-gbp icon-dollar icon-usd icon-rupee icon-inr icon-yen icon-jpy icon-renminbi icon-cny icon-won icon-krw icon-bitcoin icon-btc icon-file icon-file-text icon-sort-by-alphabet icon-sort-by-alphabet-alt icon-sort-by-attributes icon-sort-by-attributes-alt icon-sort-by-order icon-sort-by-order-alt icon-thumbs-up icon-thumbs-down icon-youtube-sign icon-youtube icon-xing icon-xing-sign icon-youtube-play icon-dropbox icon-stackexchange icon-instagram icon-flickr icon-adn icon-bitbucket icon-bitbucket-sign icon-tumblr icon-tumblr-sign icon-long-arrow-down icon-long-arrow-up icon-long-arrow-left icon-long-arrow-right icon-apple icon-windows icon-android icon-linux icon-dribbble icon-skype icon-foursquare icon-trello icon-female icon-male icon-gittip icon-sun icon-moon icon-archive icon-bug icon-vk icon-weibo icon-renren