Font Awesome icon usage statistics

  • 4 types of Font Awesome iconic font are used and found 6 times in total.
  • VC.CN used 1.5 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of VC.CN are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • VC.CN includes "https://ctquancom.b0.upaiyun.com/assets/controllers/home-6fa78fdaaccde9d319f9845ea2bce0b3.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'Bebas';src:url("../font/BEBAS___-webfont.eot");src:url("../font/BEBAS___-webfont.eot?iefix") format("eot"),url("../font/BEBAS___-webfont.woff") format("woff"),url("../font/BEBAS___-webfont.ttf") format("truetype"),url("../font/BEBAS___-webfont.svg#webfont") format("svg")}body{color:#666;font-size:12px;font-family:Helvetica,"Noto Sans S Chinese","Microsoft YaHei",sans-serif;background:#f5f5f5}::-webkit-input-placeholder{color:#c1c4c8 !important}::-moz-placeholder{color:#c1c4c8 !important}input:-moz-placeholder{color:#c1c4c8 !important}*{outline:none !important}.navbar ul.outer-nav>li>a{position:relative}.navbar ul.outer-nav>li>a:hover{-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;background-color:#75c8e6 !important}.navbar ul.outer-nav>li>a:hover:before{-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;background-color:#75c8e6}.navbar ul.outer-nav>li>a:before{content:'';position:absolute;width:100%;height:2px;padding:0;margin:0;top:-2px;left:0}.navbar ul.outer-nav>li.active>a{box-shadow:none !important;background-color:rgba(117,200,230,0.2)}.navbar ul.outer-nav>li.active>a:before{content:'';position:absolute;width:100%;height:2px;background-color:#75c8e6;padding:0;margin:0;top:-2px;left:0}.modal,.well{border-radius:0}.container,.span12{width:940px !important;margin:0 auto}#main_content{padding-top:20px;margin-bottom:20px}a{outline:none !important;text-decoration:none !important;color:#525252}a:hover{text-decoration:none;color:#75c8e6}a:active,a:focus{text-decoration:none;color:#75c8e6}a.decorate{border-bottom:1px solid transparent;color:#525252;padding-bottom:2px}a.decorate:hover{color:#75c8e6;border-color:#75c8e6}.red{color:#D14}.white-block{background-color:white;border:1px solid #ddd \0;box-shadow:1px 1px 2px rgba(0,0,0,0.4)}.block-padding{padding:15px 10px}.header-padding{padding:15px 10px 0 10px}.blue-block{background-color:#F9F9FC;border:1px solid #eee}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{margin-top:5px;float:left}.field{margin-bottom:10px}.nav li a{font-size:14px}.nav .dropdown{margin-top:10px !important;display:block}.nav .dropdown b.caret{margin-top:15px !important;position:absolute;right:0}.nav .dropdown .dropdown-toggle{width:45px;height:30px}.nav .dropdown img{border-radius:15px;height:30px;margin-right:10px;float:left;border:0}.nav .dropdown div{padding-top:5px}.clear{clear:both}.clearfix{overflow:auto;zoom:1}table td.label-td{width:80px}.navbar{margin-bottom:0}.text-shadow{text-shadow:1px 1px 1px #fff}ul{list-style:none}table td{vertical-align:top}em{font-style:normal}img{border:1px solid #eee;padding:1px}.alert-block{position:relative}.alert-block .btn-large{position:absolute;right:10px;top:10px}.alert-info a{margin:0 5px}.line-split{border-top:1px solid #eee;font-size:0;width:100%;height:1px;overflow:hidden;position:absolute;left:0;bottom:51px}.logo-nav{padding:0}.logo-nav img{border:0}.light_blue{background:#dce5ec}.light_pink{background:#f2e0d6}.light_gray{background:#f7eed2}.white-color{color:#fff;padding-right:10px;font-size:14px}code{color:#666;margin-right:2px}.ok_icon i{color:#51a351}.blue-border{border:1px solid #ffe4bc}.warning_icon i,.ok_icon i{font-size:18px;float:right !important;margin-top:-2px !important;color:red}.ok-btn i{margin-top:2px !important}.icon-backward,.icon-forward{margin:4px}.bordered{border:1px solid #ddd}.dropdown-menu-custom{position:absolute;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;background-color:#ffffff;_border:1px solid #ccc;*border:1px solid #ccc;border:1px solid #ccc \0;box-shadow:0 5px 10px rgba(0,0,0,0.2);background-clip:padding-box;top:48px;left:-10px}.dropdown-menu-custom li a{display:block;padding:3px 12px;color:#666}.dropdown-menu-custom li a:hover{color:#fff;text-decoration:none;background-color:#75c8e6}.modal-body{max-height:520px}.slide img{border:0}.links a{margin-right:5px}.highlight{height:20px;overflow:hidden}.my_startup,.institutions_nav,.admin_nav{position:relative}.my_startup b,.institutions_nav b,.admin_nav b{margin:10px 0 0 2px;*margin:5px 0 0 2px}.gray-color{color:#999;margin-right:2px;margin-left:2px}h4{margin:0;padding:0;font-size:14px}h2 .more{font-size:14px}i.icon-remove{color:#D14}i.icon-ok{color:#468847}a i{margin-right:2px;padding-right:0}.word-break{word-break:break-all}table.bottom-border{border-bottom:1px solid #ddd}.float-alert{font-size:13px;position:fixed;top:46px;z-index:10;line-height:40px}.float-alert a{margin-left:8px}ul.disc-li-ul li{list-style:disc}ul.loose-ul li{line-height:24px}.gray-block{background:#EEE;padding:15px 10px;float:left;margin-bottom:20px;color:#525252}.gray-block div{line-height:28px}.gray-block .title{font-size:13px}.gray-block .value{font-size:22px;font-weight:700}.gray-block .value .unit{font-size:18px;margin-left:5px}a.black-link{color:#666;text-decoration:none}.georgia{font-family:Georgia,"Times New Roman",Times,serif !important}img.round-image-link{border-radius:100px}a.round-image-link img{border-radius:100px}.round-image{border-radius:100px;border:1px solid #ccc !important;padding:2px}.none-text-decoration{text-decoration:none}.none-text-decoration:hover{text-decoration:none}.medium-avatar{width:50px;height:50px}a.btn i{padding-right:0 !important;margin-right:1px !important}.vertical-middle{vertical-align:middle !important}a.btn.btn-success i.icon-ok{color:white}.left{float:left;margin-right:10px}.left i{padding-right:0;margin-top:4px;float:left}.brand{padding:14px !important;font-size:28px !important}.marg-top-5px{margin-top:3px}.marg-10px{margin-bottom:10px}.mar-left{margin-left:10px}.font-large{font-size:18px}.margin-right{margin-right:5px !important}.popover.top{margin-top:-8px !important}.center{text-align:center}td.center{text-align:center !important}.text-left{text-align:left}td.text-left{text-align:left !important}.text-right{text-align:right}td.text-right{text-align:right !important}.well-black{background:#f9f9f9 !important}.well-top{margin-top:50px}.large-font{font-size:14px}.no-border{border:0 !important}small{font-size:12px !important}i{margin-right:5px}.well,.form-actions .table{border:solid 1px #ddd;border-color:#ddd;background:white}abbr[title],abbr[data-original-title]{color:red;font-weight:bold}.well-small .optional{margin-bottom:5px !important}.small-font{font-size:11px}.small-font code{margin-right:5px;color:#2f5b9d}.small-font a:hover code{color:#005580}h4.title{color:#08c;margin-bottom:10px;padding-left:10px}.loading_block{text-align:center;position:relative;font-size:14px;padding:10px 0;position:relative;background:transparent;width:18%;margin:10px auto;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.loading_block #load_icon{position:absolute;left:40%}.loading_block a{color:#666;text-decoration:none}.loading_block a:hover{color:#999}.page-header{border-bottom:0;margin:10px 0 10px 0;padding-bottom:0}.page-header h4{font-size:18px;line-height:36px}.page-header h4 a.sub_link{font-size:12px;color:#999;margin-left:8px;font-weight:normal}.page-header i{margin-right:2px}.page-header a.title-link{font-size:13px;margin-left:5px}.page-header select{line-height:24px;height:24px;font-size:12px;width:100px}.block_left{margin-right:5px}.form_note{margin-bottom:10px;color:#7A7A7A}.form_note .title{font-size:15px}.form_note ul{list-style:disc}.form_note ul li{line-height:28px;font-size:13px}table.table.table-border-bottom td{border-top:0;border-bottom:1px solid #eee}table.table.table-no-border td{border-top:0;border-left:0;border-right:0;border-bottom:0}.relative{position:relative}.color-gray{color:#777}hr{border-bottom:0;font-size:0;height:1px;overflow:hidden;margin:5px 0 10px 0}.header-hr{margin:5px 0 10px 0}.hidden{display:none !important}.nomal a{color:#000 !important}.avatar-large{width:130px !important;height:130px !important}.avatar-big{width:120px !important;height:120px !important}.avatar-mid{width:80px !important;height:80px}.avatar{width:63px !important;height:63px !important}.hetou-infos{text-align:center;margin-bottom:10px;line-height:40px;border-bottom:1px solid #ddd;font-family:"Microsoft YaHei","Hiragino Sans GB"}.hetou-infos h4{font-size:18px;color:#666;margin:10px}.hetou-infos .pitch{font-size:17px}.bottom-right-oper{position:absolute;right:0;bottom:0;opacity:0.5;filter:alpha(opacity=50);display:none}.bottom-right-oper a{color:white;margin-left:3px;float:left;display:block;background:#333;padding:2px 5px;text-decoration:none}table.no-border td{border:0}.avatar-small{width:38px !important;height:38px !important;margin-bottom:12px;border-radius:20px}.modal{overflow-y:auto;max-height:80%}.modal input.optional,.modal textarea.text,.modal input.required{width:420px !important}a.avatar-img{display:block}a.avatar-img:hover{opacity:0.9}.pitch-info-36{height:36px;overflow:hidden}.text-left{text-align:left}.modal.high-modal{top:30px !important;max-height:88%}.modal.high-modal .modal-body{max-height:78%}.user-avatar{width:70px}.user-avatar img{width:70px;height:70px;margin-bottom:5px}.follow-btn{width:60px}.startup_list{background:#f9f9f9;padding-left:6px}.startup_list img{margin:5px 3px 5px 3px;border-radius:0;border-color:#eee;width:30px;float:left}.startup_list img.avatar_list{height:30px;float:left}.startup_list a.Startup_avatar,.startup_list a.User_avatar{height:30px;display:block;float:left;width:45px}.startup-list a{height:30px}.startup-list img{margin:5px 0px 0 5px;height:30px;float:left}.startup-list b{color:#999;line-height:40px}.gray-split{border-top:1px solid #eee;width:100%;margin:10px 0}.share{position:fixed;right:0;top:30%;border:0;font-weight:bold;writing-mode:tb-rl;text-indent:-2222px;width:39px;float:left;z-index:22}.share a{background:url("/images/home/goto_top.jpg") no-repeat;width:40px;height:38px;display:block;cursor:pointer;overflow:hidden;float:left}.share a#gotop{background-position:0 0;*background-position:-80px -62px}.share a#gotop:hover{background-position:-62px 0px;*background-position:-80px 0px}.share a#feedback{background-position:0 -40px;*background-position:-40px -62px;float:left}.share a#feedback:hover{background-position:-62px -40px;*background-position:-40px 0px}.share a#faq{background-position:0 -81px;*background-position:0px -62px;float:left}.share a#faq:hover{background-position:-62px -81px;*background-position:0px 0px}.alert{font-size:14px}.alert.alert-tips{text-shadow:none;background-color:#0090d2;color:white}.alert.alert-tips a{color:white}.alert.alert-tips p.title{font-size:16px}ul.nav.sidebar-nav{border-bottom:0}.user-avatar-msg-count{color:white;position:absolute;display:block;height:10px;top:-6px;line-height:10px;padding:4px 6px;*padding:2px 2px;left:20px;background-color:#E35233;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px}h5.hetou-sucesss-title{text-align:center;font-size:20px;width:50%;margin:0 auto;color:#468847}h5.hetou-sucesss-title .hetou-success,h5.hetou-sucesss-title .hetou-fail{padding-right:0;font-size:80px;display:block;margin:20px auto;width:110px;color:#468847}h5.hetou-sucesss-title .hetou-fail{color:#D14}.entry_btn-wrapper{float:right}.entry_btn-wrapper .entry_btn{border-radius:20px;border:1px solid #28292c;text-align:center;padding:8px 42px;color:#28292c;font-size:18px;text-decoration:none}.entry_btn-wrapper .entry_btn:hover{-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;color:#fff !important;background:#28292c}.entry_btn-wrapper .entry_btn.highlight{color:#75c8e6 !important;border:1px solid #75c8e6}.entry_btn-wrapper .entry_btn.highlight:hover{color:#fff !important;background:#75c8e6}.space-div{height:30px;clear:both}.space-div-10px{height:10px}.space-div-120px{height:120px}.space-div-80px{height:80px}.top-nav.navbar i{margin-top:7px}.banner-wrapper{margin:5px 0 0;padding:0;position:relative}.banner-wrapper .slick-dots{right:-25px;top:-320px;bottom:auto;width:auto}.banner-wrapper .slick-dots li{width:3px;height:25px;background-color:rgba(255,255,255,0.2);margin:10px;display:list-item}.banner-wrapper .slick-dots li.slick-active{background-color:white}.banner-wrapper .slick-dots li button:before{content:''}.container.rel{position:relative}.dash-divider{outline:none;border:none;border-bottom:1px solid #78cdeb;width:20px;margin:20px auto 10px}.dash-divider.bold{border-width:2px}.dash-divider.right{margin-right:0}.white-flat{border:1px solid #ddd;background-color:#ffffff}.tooltip-flat{z-index:999;color:#fff;border-radius:3px;padding:5px;background:rgba(50,50,50,0.9);font-size:14px;display:none;position:absolute}.tooltip-flat p{margin:0;padding:0}.tooltip-flat:before{content:"";display:inline-block;border:8px solid;border-color:transparent;border-bottom-color:rgba(50,50,50,0.9);position:absolute;top:-15px;left:20px}.light-blue-flat{color:#75c8e6 !important}.black-font{color:#525252 !important}.blue-font{color:#75c8e6 !important}.dark-black{color:#28292c !important}.light-black{color:#464646 !important}.yellow-font{color:#ffc100 !important}.gray-font{color:#a1a4a8 !important}.background-flat{background-color:#f2f6f9}.bebas{font-family:"Bebas" !important;margin:0 2px}a.flat{border-bottom:1px solid transparent;padding-bottom:2px;text-decoration:none}a.flat:hover{text-decoration:none;color:#75c8e6;border-bottom-color:#75c8e6}ul.tab-nav-flat{margin:0;padding:0;border:1px solid #d8d8d8;border-bottom:none;background-color:#f0f0f0;font-size:16px}ul.tab-nav-flat li+li{border-left:1px solid transparent}ul.tab-nav-flat li{display:inline-block;border-right:1px solid transparent;background-color:#f0f0f0;text-align:center}ul.tab-nav-flat li a{display:inline-block;padding:15px 30px;color:#28272C}ul.tab-nav-flat li a:hover{color:#75c8e6;text-decoration:none}ul.tab-nav-flat li.active{border-color:#d8d8d8;background-color:#fff}ul.tab-nav-flat li.active a{color:#75c8e6 !important}table.flat tr.even{background-color:#f2f6f9}table.flat td{border-bottom:1px solid transparent !important}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes spin{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.spin i{-webkit-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-ms-animation:spin 2s linear infinite;-o-animation:spin 2s linear infinite;animation:spin 2s linear infinite}.one-line{height:22px;line-height:22px;overflow:hidden}table.table-border-top-bottom{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.time abbr{font-weight:normal;border:none !important;color:#c1c4c8;cursor:default}.dark-link{color:#28292c}.dark-link:hover{color:#75c8e6}.sparse{line-height:30px}.f12{font-size:12px}.f13{font-size:13px}.f14{font-size:14px;line-height:24px}.f15{font-size:15px;line-height:24px}.f16{font-size:16px}.f18{font-size:18px}.f20{font-size:20px}.f24{font-size:24px}.wrap-footer{opacity:0.6;filter:alpha(opacity=60);bottom:40px;height:150px}.footer_block{z-index:1;bottom:120px}.wrap-footer,.footer-copy{background:#000;width:100%}.footer{font-family:Helvetica,"Noto Sans S Chinese","Microsoft YaHei",sans-serif;background:url("/images/home/choose-bg.png") #28282c no-repeat center center}.footer .links{margin-bottom:20px;text-align:center}.footer .links .link-wrapper{display:inline-block}.footer .links .link-wrapper a{line-height:45px}.footer .links .media-links{display:inline-block;vertical-align:middle}.footer .links a{margin-left:20px}.footer .friends{text-align:center}.footer .friends a{margin:0 6px;font-family:"NotoSansHans-Thin",sans-serif}.footer .friends a.chuangyepu-block{background:url("/images/home/chuangyepu_logo.png") no-repeat;width:113px;height:12px;margin-top:3px;display:inline-block}.footer .friends a.chuangyepu-block:hover{background-position:0 -13px}.footer .links a,.footer .friends a{color:white;font-size:13px;text-decoration:none}.footer .links a:hover,.footer .friends a:hover{color:#78cdeb}.footer-copy{background:#000;opacity:0.7;filter:alpha(opacity=70);bottom:0;line-height:40px}.wechat_disblock,.chuangyepu_chat{position:absolute;bottom:0;right:28%;z-index:111111;padding:0;height:140px}.chuangyepu_chat{right:11%}.media-links a{width:44px;height:45px;float:left;margin-left:8px !important}.sina_link{background:url("/images/home/weibo.png") no-repeat}.sina_link:hover{background:url("/images/home/weibo_hover.png") no-repeat}.linkin_link{background:url("/images/home/linkin-icon.png") no-repeat}.linkin_link:hover{background:url("/images/home/linkin_hover.png") no-repeat}.wechat{background:url("/images/home/wechat.png") no-repeat}.wechat:hover{background:url("/images/home/wechat_hover.png") no-repeat}.choose-ctquan{color:white;height:360px}#notification-nav{line-height:48px;margin-left:5px;width:40px;padding-right:10px}#notification-nav a{display:block;height:48px;text-decoration:none}#notification-nav a i{line-height:49px;margin:0;color:#64AED3}#notification-nav a .note-count{color:white;position:absolute;display:block;height:10px;top:8px;line-height:10px;padding:4px 6px;*padding:2px 2px;left:5px;background-color:#E35233;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px}.float_block{position:fixed;top:45px;width:280px;z-index:10001;border:1px solid #dedede;background-color:white;box-shadow:1px 1px 6px #ccc}.float_block a{padding:8px;display:block;font-size:13px}.float_block .notify-wrapper{position:relative}.float_block .notify-wrapper .triangle{position:absolute;left:127px;top:-9px;border:0}.float_block .notify-wrapper a.close-notify-link{color:#999;font-size:14px;padding:1px 3px 2px 3px;top:2px;right:2px;line-height:10px;text-align:right;font-size:10px;position:absolute;right:4px;background:#999;border-radius:100px;color:#fff}.float_block .notify-wrapper a.notify-link{border-bottom:1px solid #efefef}.float_block .notify-wrapper a.notify-link.last{border-bottom:0}.float_block .notify-wrapper .notify_block{max-height:300px;overflow:auto}.float_block .oper_block{background-color:#EEE;padding:8px 10px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;text-align:center}.float_block .oper_block a{display:inline;margin-right:10px}.notify-link{color:#999}.notify-link.notify-new{font-weight:bold;color:#2f5b9d}#notification-nav{line-height:48px;margin-left:5px;width:40px;padding-right:10px}#notification-nav a{display:block;height:48px;text-decoration:none}#notification-nav a i{line-height:49px;margin:0;color:#64AED3}#notification-nav a .note-count{color:white;position:absolute;display:block;height:10px;top:8px;line-height:10px;padding:4px 6px;*padding:2px 2px;left:5px;background-color:#E35233;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px}.float_block{position:fixed;top:45px;width:280px;z-index:10001;border:1px solid #dedede;background-color:white;box-shadow:1px 1px 6px #ccc}.float_block a{padding:8px;display:block;font-size:13px}.float_block .notify-wrapper{position:relative}.float_block .notify-wrapper .triangle{position:absolute;left:127px;top:-9px;border:0}.float_block .notify-wrapper a.close-notify-link{color:#999;font-size:14px;padding:1px 3px 2px 3px;top:2px;right:2px;line-height:10px;text-align:right;font-size:10px;position:absolute;right:4px;background:#999;border-radius:100px;color:#fff}.float_block .notify-wrapper a.notify-link{border-bottom:1px solid #efefef}.float_block .notify-wrapper a.notify-link.last{border-bottom:0}.float_block .notify-wrapper .notify_block{max-height:300px;overflow:auto}.float_block .oper_block{background-color:#EEE;padding:8px 10px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;text-align:center}.float_block .oper_block a{display:inline;margin-right:10px}.notify-link{color:#999}.notify-link.notify-new{font-weight:bold;color:#2f5b9d}.round-btn,.btn.round-btn{cursor:pointer;text-align:center;padding:8px 15px;display:inline-block;border:2px solid #c1c4c8;border-radius:100px;background:#fff !important;color:#c1c4c8}.round-btn:hover,.btn.round-btn:hover{border-color:#78c8eb;text-decoration:none;color:#78c8eb}.round-btn-mid,.btn.round-btn-mid{cursor:pointer;vertical-align:middle;display:inline-block;min-width:60px;text-align:center;padding:4px 10px;border-radius:20px;color:#78c8eb;border:2px solid #78c8eb;font-size:13px;text-decoration:none;background-color:#fff !important;text-shadow:none !important;background-image:none !important}.round-btn-mid:hover,.btn.round-btn-mid:hover{-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;color:#88c;box-shadow:0 0 1px rgba(100,100,100,0.4)}.round-btn-mid:focus,.btn.round-btn-mid:focus{color:#78c8eb}.input-append .round-btn-mid,.input-append .round-btn-mini{border-radius:8px;border-top-left-radius:0;border-bottom-left-radius:0;font-size:12px;padding:4px 8px;border-left:0;border-color:#DDD;color:#777}.round-btn-mini,.btn.round-btn-mini{text-align:center;font-size:12px;font-weight:normal;padding:0 3px;display:inline-block;border:1px solid #c1c4c8;border-radius:100px;text-align:center;background:#fff !important;color:#c1c4c8}.round-btn-mini:hover,.btn.round-btn-mini:hover{border-color:#78c8eb;text-decoration:none;color:#78c8eb}.nav-btn{color:#525252;text-decoration:none;font-size:16px}.nav-btn:hover{text-decoration:none}.green-nav-btn{display:inline-block;padding:15px 20px;font-size:16px;text-align:center;text-decoration:none;background-color:#47b248;border-right:none;color:#ffffff}.green-nav-btn:hover{color:#fff;text-decoration:none}@font-face{font-family:'FontAwesome';src:url("../font/fontawesome-webfont.eot?v=3.2.1");src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}

Examples and source code

icon-arrow-up

Place Font Awesome icons just about anywhere with the <i> tag.

<i class=" icon-arrow-up"></i> icon-arrow-up
Icon classes are echoed via CSS :before.

icon-arrow-up

icon-arrow-up

icon-arrow-up

icon-arrow-up

To increase icon sizes relative to their container, use the icon-large (33% increase), icon-2x, icon-3x, icon-4x, or icon-5x classes.

<p><i class=" icon-arrow-up icon-large"></i> icon-arrow-up</p>
<p><i class=" icon-arrow-up icon-2x"></i> icon-arrow-up</p>
<p><i class=" icon-arrow-up icon-3x"></i> icon-arrow-up</p>
<p><i class=" icon-arrow-up icon-4x"></i> icon-arrow-up</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
  • Font Awesome icon can be used
  • to easily replace lists

Use icon-ul and icon-li to easily replace default bullets in unordered lists.

<ul class="icon-ul">
  <li><i class="icon-li  icon-arrow-up"></i>Font Awesome icon can be used</li>
  <li><i class="icon-li  icon-arrow-up icon-spin"></i>to easily replace lists</li>
</ul>

Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Use icon-border and pull-right or pull-left for easy pull quotes or article graphics.

<i class=" icon-arrow-up icon-2x pull-left icon-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

  normal
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal
  icon-flip-vertical

To arbitrarily rotate and flip icons, use the icon-rotate-* and icon-flip-* classes.

<i class=" icon-arrow-up"></i>  normal<br>
<i class=" icon-arrow-up icon-rotate-90"></i>  icon-rotate-90<br>
<i class=" icon-arrow-up icon-rotate-180"></i>  icon-rotate-180<br>
<i class=" icon-arrow-up icon-rotate-270"></i>  icon-rotate-270<br>
<i class=" icon-arrow-up icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-arrow-up icon-flip-vertical"></i>  icon-flip-vertical

Use the icon-spin class to get any icon to rotate.

<i class=" icon-arrow-up icon-2x icon-spin"></i>
<i class=" icon-arrow-up icon-3x icon-spin"></i>
<i class=" icon-arrow-up icon-4x icon-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

icon-arrow-up on icon-check-empty
icon-arrow-up on icon-circle
icon-arrow-upl on icon-sign-blank
icon-ban-circle on icon-arrow-up

To stack multiple icons, use the icon-stack class on the parent, the icon-light for the regularly sized icon, and icon-stack-base for the larger icon. icon-light can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="icon-stack">
  <i class=" icon-check-empty icon-stack-base"></i>
  <i class=" icon-arrow-up "></i>
</span>
icon-arrow-up on icon-check-empty<br>
<span class="icon-stack">
  <i class=" icon-circle icon-stack-base"></i>
  <i class=" icon-arrow-up icon-light"></i>
</span>
icon-arrow-up on icon-circle<br>
<span class="icon-stack">
  <i class=" icon-sign-blank icon-stack-base"></i>
  <i class=" icon-arrow-up icon-light "></i>
</span>
icon-arrow-up on icon-sign-blank<br>
<span class="icon-stack">
  <i class=" icon-arrow-up icon-light"></i>
  <i class=" icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-ban-circle on icon-arrow-up