Font Awesome icon usage statistics

  • 3 types of Font Awesome iconic font are used and found 3 times in total.
  • CYBERINTELLIGENCE.IN used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of CYBERINTELLIGENCE.IN are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • CYBERINTELLIGENCE.IN includes "http://cyberintelligence.in/wp-content/cache/minify/000000/dY9LDsMwCEQvVGqlUtVLdNcTuDZxkIgdAf3k9qXuZ5fNIOCBZoZwjivKhSmjhKQa-N1r73dDSK1aTAZjkxlOgWriW0btpNrKqA6VyIyyAs2x4Hf-H3rZQroeoG3-YCqTXdvT92awNDW4Ez7cqdlyhw75jmPNVAssn9MpCmYvTSy1n9lRPAnWDOLi0Y4hR53I8-l-pvoC.css" to use Font Awesome and information from CSS is like below.
  • /**/}#lightboxIframe{display:none}.entry-content .shortcode-area{margin:0;padding:0}.entry-content .shortcode-area
    h2{margin:0
    0 20px 0;padding:0}.entry-content .shortcode-area
    ul{margin:0;padding:0}.entry-content .shortcode-area ul
    li{list-style:none;padding:0;margin:0;display:block}.shortcode-thumb{width:auto;height:auto;display:inline-block;margin:0
    10px 0 0}.shortcode-title{width:65%;display:inline-block;vertical-align:top}.entry-content .shortcode-title
    h2{font-size:16px}.shortcode-title
    a{text-decoration:none;font-weight:bold}.shortcode-title
    a#more{text-decoration:none;font-weight:normal}.entry-content .relatedposts
    ul{list-style:none;margin:0;padding:0}.sidebar-thumb{width:auto;margin-right:12px;display:inline-block;vertical-align:top}.sidebar-thumb-title{position:relative;width:100%;display:inline-block;vertical-align:top;line-height:18px}.sidebar-thumb-title#thmb{width:65%}a.inbound-button.inbound-special-class i:before, button.inbound-button-submit.inbound-submit-action i:before{font-family:'FontAwesome';font-style:normal;font-weight:300;padding-right:5px}.inbound-label.inbound-label-top,.inbound-label.inbound-label-bottom{display:block}#inbound-form-wrapper .inbound-label.inbound-label-bottom{margin:0px
    0 10px 0}#inbound-form-wrapper .inbound-label.inbound-label-inline{min-width:80px;display:inline-block;padding-right:10px}.radio-inbound-vertical.radio-inbound-label-bottom, #inbound-form-wrapper .inbound-label.inbound-label-inline.inbound-input-radio,.radio-inbound-vertical.radio-inbound-label-top{display:block}.radio-inbound-vertical.radio-inbound-label-bottom:last-child{margin:0px
    0 10px 0}.radio-inbound-vertical.radio-inbound-label-inline{padding-right:5px}.inbound-label.inbound-label-placeholder{display:none}.inbound-label.inbound-label-placeholder.inbound-input-dropdown{display:block}.inbound-label.inbound-label-placeholder.inbound-input-dropdown_countries{display:block}.inbound-horizontal{display:inline-block}#inbound_form_submit{text-transform:none;cursor:pointer}.inbound-field{margin-left:0 !important;list-style-type:none !important;list-style-image:none !important;list-style:none !important;overflow:visible}.inbound-field
    label{margin:10px
    0 4px 0;font-weight:bold;line-height:1.3em;clear:both}.inbound-field input[type=radio]{margin-top:4px;width:auto !important}.inbound-field.inbound-submit-area{padding:0px
    0 10px 0;margin:15px
    0 0 0;clear:both}.inbound-field.inbound-submit-area input.inbound-button, .inbound-field.inbound-submit-area input[type=submit]{font-size:1em}.inbound-description{font-size:0.85em;line-height:1.5em;clear:both;font-family:sans-serif;letter-spacing:normal;padding:10px
    0 0 0;width:99.8%}textarea.inbound-input-textarea{height:150px;width:99.2%}#inbound-form-wrapper{overflow:inherit;margin:10px
    0;max-width:98%}.inbound-field input[type=text], .inbound-field input[type=url], .inbound-field input[type=email], .inbound-field input[type=tel], .inbound-field input[type=number], .inbound-field input[type=password]{width:47%}#inbound-form-wrapper .inbound-horizontal input[type=text], #inbound-form-wrapper .inbound-horizontal input[type=url], #inbound-form-wrapper .inbound-horizontal input[type=email], #inbound-form-wrapper .inbound-horizontal input[type=tel], #inbound-form-wrapper .inbound-horizontal input[type=number], #inbound-form-wrapper .inbound-horizontal input[type=password]{width:88%}.inbound-field input[type="checkbox"],.inbound-field input[type="radio"]{display:inline-block;width:auto;margin:10px}#inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline input[type=text], #inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline input[type=url], #inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline input[type=email], #inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline input[type=tel], #inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline input[type=number], #inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline input[type=password]{width:130px}#inbound-form-wrapper .inbound-horizontal.label-inbound-label-inline .inbound-label.inbound-label-inline{min-width:60px;display:inline-block;padding-right:10px;text-align:right}#inbound-form-wrapper .label-inbound-label-inline
    input{display:inline-block}.inbound-label.inbound-input-radio{display:block}.automation-done{margin-top:4px;width:auto !important;float:left}.radionotdonelabel{display:block;margin:0
    0 0 24px;padding:0;width:auto;line-height:1.5;vertical-align:top}.inbound-clear{clear:both;display:block;overflow:hidden;width:0;height:0}.inbound-clearfix:before,.inbound-clearfix:after,.inbound-row:before,.inbound-row:after,.inbound-row_30:before,.inbound-row_30:after{content:'\0020';display:block;overflow:hidden;width:0;height:0}.inbound-clearfix:after,.inbound-row:after,.inbound-row_30:after{clear:both}.inbound-clearfix{zoom:1}.inbound-row{margin-left:-10px;margin-right:-10px}.inbound-row_30{margin-left:-15px;margin-right:-15px}.inbound-grid{float:left;min-height:1px;padding-right:5px;padding-left:0px;position:relative}#inbound-list{overflow:hidden;margin-bottom:10px}.row_30 .inbound-grid{padding-left:15px;padding-right:15px}.inbound-grid.full{width:100%}.inbound-grid.one-half,.inbound-grid.inbound-2-col{width:48%}.inbound-grid.one-third,.inbound-grid.inbound-3-col{width:31.333333%}.inbound-grid.two-third{width:66.666667%}.inbound-grid.one-fourth,.inbound-grid.inbound-4-col{width:23%}.inbound-grid.three-fourth{width:75%}.inbound-grid.one-fifth{width:18%}.inbound-grid.two-fifth{width:40%}.inbound-grid.three-fifth{width:60%}.inbound-grid.four-fifth{width:80%}ul.inboundnow-social-links{list-style:none;margin:0;padding:0}ul.inboundnow-social-links
    li{display:inline-block;list-style:none;margin:0;padding:7px
    0}ul.inboundnow-social-links li
    a{background:#f2f2f2;border:1px
    solid #EBEBEA;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;color:#696763;margin:0px
    1px}ul.inboundnow-social-links li a:hover{background-color:#c8232b;border-color:rgba(0,0,0,0.2);color:#fff}#footer-wrapper ul.inboundnow-social-links{float:right}#footer-wrapper ul.inboundnow-social-links li
    a{background-color:#4A4845;border:none;color:#9C9A96}#footer-wrapper ul.inboundnow-social-links li a:hover{background-color:#c8232b;color:#fff}.inbound-widget-about{background:url('/wp-content/plugins/landing-pages/shared/shortcodes/css/images/map.png') no-repeat 0 0;background-size:100%}.inbound-widget-about .address,
    .inbound-widget-about .telephone,
    .inbound-widget-about
    .email{}.inbound-widget-about
    i{color:#9C9A96;margin-right:5px}.inbound-divider{border-top:1px solid #EBEBEA;height:1px;margin:0px;position:relative}.inbound-divider.none{border:none}.inbound-divider.solid{border-top:1px solid #EBEBEA}.inbound-divider.dashed{border-top:1px dashed #EBEBEA}.inbound-divider.dotted{border-top:1px dotted #EBEBEA}.inbound-divider.double{border-top:3px double #EBEBEA}.inbound-teaser{margin-bottom:20px}.inbound-teaser .inbound-teaser-header{margin:0px
    0px 10px 56px}.inbound-teaser .inbound-teaser-title{margin:0px}.inbound-teaser .inbound-teaser-subtitle{color:#9C9A96}.inbound-teaser .inbound-teaser-icon{background:#4A4845;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#fff;font-size:16px;float:left;line-height:36px;height:36px;width:36px;margin-top:5px;text-align:center}.inbound-teaser .inbound-teaser-image{float:left;height:36px;width:36px;margin-top:5px}.inbound-teaser:hover .inbound-teaser-icon{background-color:#c8232b}.inbound-teaser.nested .inbound-teaser-content{margin-left:56px}.inbound-teaser.centered{text-align:center}.inbound-teaser.centered .inbound-teaser-icon{background:none;color:#696763;float:none;font-size:64px;line-height:64px;width:64px;height:64px;margin:0px
    auto 5px auto}.inbound-teaser.centered .inbound-teaser-header{margin-left:0px}.inbound-callout{background:#f2f2f2;border:1px
    solid #EBEBEA;-webkit-box-shadow:inset 1px 1px 1px #f9f9f9;-moz-box-shadow:inset 1px 1px 1px #f9f9f9;box-shadow:inset 1px 1px 1px #f9f9f9;padding:20px
    25px 0px;margin-bottom:20px}.inbound-callout .left, .inbound-callout
    .right{margin-bottom:15px}.inbound-callout
    h2{font-size:24px;line-height:24px;margin:0px
    0px 5px;text-shadow:1px 1px 1px #fff}.inbound-callout
    .subtitle{font-size:16px;line-height:22px;text-shadow:1px 1px 1px #fff;margin:0px
    0px 5px}.inbound-callout .inbound-button{margin:7px
    0px 5px 0px}.inbound-intro{margin-bottom:20px}.inbound-intro
    h1{margin-bottom:10px}.inbound-intro .inbound-intro-content{font-size:16px;line-height:24px;margin-bottom:20px}.inbound-tabs-content{margin-bottom:20px}ul.inbound-tabs-nav{border-bottom:1px solid #EBEBEA;list-style:none;margin:0;padding:0}ul.inbound-tabs-nav
    li{display:inline-block;margin:0;padding:0}ul.inbound-tabs-nav li
    a{background:#f2f2f2 url('/wp-content/plugins/landing-pages/shared/shortcodes/css/images/gradient.png');border:1px
    solid #EBEBEA;border-right:none;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);color:#696763;display:inline-block;font-weight:bold;padding:10px
    20px;position:relative;margin-bottom:-1px;text-shadow:1px 1px 1px #fff}ul.inbound-tabs-nav li a
    span{display:inline-block;margin-left:5px}ul.inbound-tabs-nav li
    a.active{background-color:#fff;border-bottom-color:#fff;color:#4A4845}ul.inbound-tabs-nav li:last-child{border-right:1px solid #EBEBEA}.inbound-tabs>div{border:1px
    solid #EBEBEA;border-top:none;padding:20px}.inbound-accordion{margin-bottom:20px}.inbound-accordion .pane-title{background:#f2f2f2;border:1px
    solid #EBEBEA;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);font-size:110%;display:block;font-weight:bold;padding:12px
    20px;position:relative;margin-bottom:-1px;text-shadow:1px 1px 1px #fff}.inbound-accordion .pane-title.active{color:#4A4845}.inbound-accordion .pane-title .pane-icon{width:16px;margin-right:10px;text-align:center}.inbound-accordion .pane-title .status-off,
    .inbound-accordion .pane-title .status-on{color:#CECDCA;cursor:pointer;float:right;font-family:Verdana;font-size:14px;font-weight:bold}.inbound-accordion .pane-title .status-off{display:block}.inbound-accordion .pane-title .status-on{display:none}.inbound-accordion .pane-title.active .status-off{display:none}.inbound-accordion .pane-title.active .status-on{display:block}.inbound-accordion
    .pane{border:1px
    solid #EBEBEA;padding:20px;margin:0px
    0px 20px 0px}.inbound-accordion
    .pane.last{margin:0px}.inbound-fancy-quote{margin:0
    0 20px}.inbound-fancy-quote .quote-text{background:#f2f2f2;border:1px
    solid #EBEBEA;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);color:#555;font:normal 16px/22px Georgia, serif;margin:0px
    0px 15px;padding:20px;position:relative;text-shadow:1px 1px 1px rgba(255,255,255,0.5)}.inbound-fancy-quote .quote-text
    p{margin:0}.inbound-fancy-quote .quote-text
    .triangle{background:#f2f2f2;border:1px
    solid;border-color:#f2f2f2 #EBEBEA #EBEBEA #f2f2f2;display:block;width:16px;height:16px;position:absolute;bottom:-8px;left:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.inbound-fancy-quote .quote-author{padding:0px
    0px;position:relative}.inbound-fancy-quote .quote-author .quote-author-name{font-weight:bold}.inbound-fancy-quote .quote-author .quote-author-name:before{content:"\2014 \0020";color:#CECDCA;font-weight:normal}.inbound-fancy-quote .quote-author .quote-author-meta{color:#9C9A96}.inbound-pricing{border-left:1px solid #fff;margin-bottom:30px;margin-top:10px}.inbound-pricing
    .plan{background:#fff;border:1px
    solid #EBEBEA;float:left;padding:0;text-align:center;position:relative;margin-left:-1px}.inbound-pricing .plan-header{background:#f2f2f2;border-bottom:1px solid #EBEBEA;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);padding:20px;text-shadow:1px 1px 1px #fff}.inbound-pricing .plan-header
    h2{font-size:16px;line-height:22px;margin:0}.inbound-pricing .plan-price{background:#fcfcfc;border-bottom:1px solid #EBEBEA;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);padding:20px;text-shadow:1px 1px 1px #fff}.inbound-pricing .plan-price
    strong{display:block;font-size:40px;line-height:40px}.inbound-pricing .plan-price
    span{color:#9C9A96}.inbound-pricing .plan-content{background:#fff}.inbound-pricing .plan-content ul,
    .inbound-pricing .plan-content
    ol{list-style:none;padding:0;margin:0}.inbound-pricing .plan-content ul li,
    .inbound-pricing .plan-content ol
    li{border-bottom:1px solid #EBEBEA;padding:10px
    20px;margin:0}.inbound-pricing .plan-footer{background:#f9f9f9;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3);padding:20px}.inbound-pricing .plan-footer .inbound-button{padding:5px
    20px}.inbound-pricing
    .plan.featured{border-color:#CECDCA;-webkit-box-shadow:0px 0px 15px rgba(0,0,0,0.1);-moz-box-shadow:0px 0px 15px rgba(0,0,0,0.1);box-shadow:0px 0px 15px rgba(0,0,0,0.1);z-index:200;margin-top:-10px}.inbound-pricing .plan.featured .plan-header{background-color:#e0e0e0;border-color:#CECDCA;padding:25px
    0px}.inbound-pricing .plan.featured .plan-header
    h2{}.inbound-pricing .plan.featured .plan-price{background-color:#f2f2f2}.inbound-pricing .plan.featured .plan-content{}.inbound-pricing .plan.featured .plan-footer{padding:25px
    0px;background-color:#f2f2f2;border-color:#CECDCA}.inbound-dropcap{font-size:48px;font-weight:bold;float:left;margin:10px
    10px 10px 0}.inbound-dropcap.square{background:#696763;color:#fff;font-size:24px;width:48px;height:48px;line-height:48px;text-align:center;margin:6px
    10px 0px 0}.inbound-dropcap.circle{background:#696763;border-radius:50%;color:#fff;font-size:24px;width:48px;height:48px;line-height:48px;text-align:center;margin:6px
    10px 0px 0}.inbound-alert-message{background:#FFF;border:1px
    solid #EBEBEA;padding:8px
    50px 8px 20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;margin-bottom:20px;text-shadow:1px 1px 1px rgba(255,255,255,0.5)}.inbound-alert-message
    span.close{position:absolute;color:#CECDCA;display:inline-block;font-size:14px;line-height:100%;font-weight:700;width:14px;height:14px;text-align:center;cursor:pointer;right:10px;top:11px}.inbound-alert-message span.close:hover{color:#9C9A96}.inbound-alert-message.blue{background:#dbf3f9;border:1px
    solid #c5e3ea}.inbound-alert-message.green{background:#e2ffc9;border:1px
    solid #c5eda3}.inbound-alert-message.red{background:#ffe2e2;border:1px
    solid #fcd1d1}.inbound-alert-message.yellow{background:#fcf7d1;border:1px
    solid #f2ebba}.inbound-content-box{background:#f2f2f2;border:1px
    solid #EBEBEA;-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);margin:0px
    0px 20px;padding:20px
    20px 20px;position:relative;text-shadow:1px 1px 1px rgba(255,255,255,0.5)}.inbound-content-box>p:last-child{margin-bottom:0}.inbound-content-box.blue{background:#EEF9FC;border:1px
    solid #dfecf9}.inbound-content-box.green{background:#E9FFD6;border:1px
    solid #D4F2BB}.inbound-content-box.red{background:#FCE3E3;border:1px
    solid #fcd1d1}.inbound-content-box.yellow{background:#fcf7d1;border:1px
    solid #f2ebba}.inbound-content-box h1,
    .inbound-content-box h2,
    .inbound-content-box h3,
    .inbound-content-box h4,
    .inbound-content-box h5,
    .inbound-content-box
    h6{margin-bottom:10px}.inbound-profile-box{margin-bottom:20px}.inbound-profile-box .profile-img{margin-bottom:15px}.inbound-profile-box .profile-img
    img{display:block;width:100%;height:auto;margin:-1px}.inbound-profile-box .profile-name{margin-bottom:0}.inbound-profile-box .profile-meta{color:#9C9A96;margin-bottom:15px}.inbound-profile-box .profile-desc p:last-child{margin-bottom:0px}.inbound-profile-box .profile-footer{margin-top:15px}.inbound-profile-box .profile-footer
    a{color:#9C9A96;font-size:12px;margin-right:10px}.inbound-client_box{margin-bottom:20px}.inbound-client_box
    ul{list-style:none;margin:0;padding:0}.inbound-client_box ul li.inbound-grid{border:1px
    solid #EBEBEA;margin:0px
    -1px -1px 0px;padding:0}.inbound-client_box ul li
    a{display:block;text-align:center}.inbound-client_box ul li:hover{border-color:#CECDCA;-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.1);-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.1);box-shadow:0px 0px 8px rgba(0,0,0,0.1);z-index:200}.inbound-google_map{max-width:100%;margin-bottom:20px}a.inbound-button,a.inbound-button.inbound-special-class{background:#c8232b;border:1px
    solid rgba(0,0,0,0.15);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0px 2px 3px rgba(0,0,0,0.15), inset 1px 1px 1px rgba(255,255,255,0.2);-moz-box-shadow:0px 2px 3px rgba(0,0,0,0.15), inset 1px 1px 1px rgba(255,255,255,0.2);box-shadow:0px 2px 3px rgba(0,0,0,0.15), inset 1px 1px 1px rgba(255,255,255,0.2);color:#fff;cursor:pointer;display:inline-block;font-family:inherit;font-size:14px;font-weight:bold;padding:8px
    15px;text-shadow:-1px -1px 1px rgba(0,0,0,0.15);text-decoration:none;text-align:center}.inbound-button:hover{color:#fff}.inbound-button.small{font-size:100%;padding:4px
    10px}.inbound-button.large{font-size:18px;padding:12px
    30px}input[type=submit].inbound-button,button.inbound-button{-webkit-appearance:none;cursor:pointer}.inbound-button.black{background-color:#4A4845}.inbound-button.blue{background-color:#707ef9}.inbound-button.brown{background-color:#5e3d1d}.inbound-button.green{background-color:#65b20e}.inbound-button.orange{background-color:#f90}.inbound-button.pink{background-color:#fc149f}.inbound-button.purple{background-color:#993d9e}.inbound-button.red{background-color:#fc5a5a}.inbound-button.silver{background-color:#858585}.inbound-button.yellow{background-color:#f7c707}.inbound-button.white{background-color:#f4f4f4;border-color:#ccc;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.08), inset 1px 1px 1px rgba(255,255,255,0.2);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.08), inset 1px 1px 1px rgba(255,255,255,0.2);box-shadow:0px 1px 2px rgba(0,0,0,0.08), inset 1px 1px 1px rgba(255,255,255,0.2);color:#666;text-shadow:none}.inbound-button.white:hover{color:#4A4845}
    /*
     *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
     *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
     */

Examples and source code

fa-envelope-o

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

<i class="fa fa-envelope-o"></i> fa-envelope-o
Icon classes are echoed via CSS :before.

fa-envelope-o

fa-envelope-o

fa-envelope-o

fa-envelope-o

fa-envelope-o

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

<p><i class="fa fa-envelope-o fa-lg"></i> fa-envelope-o</p>
<p><i class="fa fa-envelope-o fa-2x"></i> fa-envelope-o</p>
<p><i class="fa fa-envelope-o fa-3x"></i> fa-envelope-o</p>
<p><i class="fa fa-envelope-o fa-4x"></i> fa-envelope-o</p>
<p><i class="fa fa-envelope-o fa-5x"></i> fa-envelope-o</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Library</a></li>
</ul>
  • Font Awesome icon can be used
  • to easily replace lists

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

<ul class="fa-ul">
  <li><i class="fa-li fa fa-envelope-o"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-envelope-o fa-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 fa-border and pull-right or pull-left for easy pull quotes or article graphics.

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

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

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

<i class="fa fa-envelope-o"></i>  normal<br>
<i class="fa fa-envelope-o fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-envelope-o fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-envelope-o fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-envelope-o fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-envelope-o fa-flip-vertical"></i>  fa-flip-vertical

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-envelope-o fa-2x fa-spin"></i>
<i class="fa fa-envelope-o fa-3x fa-spin"></i>
<i class="fa fa-envelope-o fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-envelope-o on fa-square-o
fa-envelope-o on fa-circle
fa-envelope-ol on fa-square
fa-ban on fa-envelope-o

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse 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="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-envelope-o fa-stack-1x"></i>
</span>
fa-envelope-o on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-envelope-o fa-stack-1x fa-inverse"></i>
</span>
fa-envelope-o on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-envelope-o fa-stack-1x fa-inverse"></i>
</span>
fa-envelope-o on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-envelope-o fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-envelope-o

Font Awesome works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">
  <i class="fa fa-envelope-o fa-lg"></i> fa-envelope-o</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-envelope-o"></i> fa-envelope-o</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-envelope-o fa-2x pull-left"></i> Font Awesome<br>fa-envelope-o



<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="fa-envelope-o">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="fa-envelope-o">
</div>