Font Awesome icon usage statistics

  • 4 types of Font Awesome iconic font are used and found 6 times in total.
  • CROSLI.DE used 1.5 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of CROSLI.DE are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • CROSLI.DE includes "http://www.crosli.de/wp-content/themes/rt_spectral_wp/css-compiled/master-5d528936508decd63a7ebd1a1ad3d9a6.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'notosans';font-family:'Helvetica', Arial, sans serif;font-weight:normal;font-style:normal;}@font-face{font-family:'indieflower';font-family:'Helvetica', Arial, sans serif;font-weight:normal;font-style:normal;}@font-face{font-family:'fontawesome';font-weight:normal;font-style:normal;}.rok-left{float:left;}.rok-right{float:right;}.rok-dropdown-group,.rok-dropdown{position:relative;}.rok-dropdown-open .rok-dropdown{display:block;}.rok-popover-group,.rok-popover{position:relative;}.rok-popover-open .rok-popover{display:block;}a:hover{text-decoration:none;}.table{display:table;}.cell{display:table-cell;}html{margin-bottom:1px;height:100%;}body{margin-bottom:1px;}li{line-height:;}.rt-block{padding:15px;margin:10px;position:relative;}#rt-content-top,#rt-content-bottom{overflow:hidden;}.rt-grid-1:before,.rt-grid-2:before,.rt-grid-3:before,.rt-grid-4:before,.rt-grid-5:before,.rt-grid-6:before,.rt-grid-7:before,.rt-grid-8:before,.rt-grid-9:before,.rt-grid-10:before,.rt-grid-11:before,.rt-grid-12:before{display:table;content:"";clear:both;}.rt-grid-1:after,.rt-grid-2:after,.rt-grid-3:after,.rt-grid-4:after,.rt-grid-5:after,.rt-grid-6:after,.rt-grid-7:after,.rt-grid-8:after,.rt-grid-9:after,.rt-grid-10:after,.rt-grid-11:after,.rt-grid-12:after{display:table;content:"";clear:both;}.font-family-optima{font-family:Optima, Lucida, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;}.font-family-geneva{font-family:Geneva, Tahoma, "Nimbus Sans L", sans-serif;}.font-family-helvetica{font-family:'Open Sans', Arial, FreeSans, sans-serif;}.font-family-lucida{font-family:"Lucida Grande", Helvetica, Verdana, sans-serif;}.font-family-georgia{font-family:Georgia, sans-serif;}.font-family-trebuchet{font-family:"Trebuchet MS", sans-serif;}.font-family-palatino{font-family:"Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Times, serif;}body{font-size:16px;line-height:1.7em;font-family:'Open Sans', Arial, Sans-Serif;}.font-size-is-xlarge{font-size:17px;line-height:1.8em;}.font-size-is-large{font-size:15px;}.font-size-is-default{font-size:14px;}.font-size-is-small{font-size:12px;}.font-size-is-xsmall{font-size:10px;}p{margin:0 0 15px 0;}a{text-decoration:none;}a:focus{outline:none;}.left-1,.left-2,.left-3,.left-4,.left-5,.left-6,.left-7,.left-8,.left-9,.left-10,.right-11{float:left;margin-right:50px;margin-bottom:15px;position:relative;}.right-1,.right-2,.right-3,.right-4,.right-5,.right-6,.right-7,.right-8,.right-9,.right-10,.right-11{float:right;margin-left:50px;margin-bottom:15px;position:relative;}.date-block{padding:15px;margin:25px;}#gantry-resetsettings{display:block;padding:15px;margin:10px;}ul,ol{margin:0 0 15px 0px;}ul li{padding:0;margin:0;}ul li.author{margin:0;letter-spacing:1px;list-style:none;font-weight:bold;text-align:right;}ul li.author span{display:block;font-weight:normal;margin-bottom:10px;line-height:1em;}ul li.date{margin:0;letter-spacing:1px;list-style:none;text-align:right;font-weight:bold;}ul li.date span{display:block;font-weight:normal;margin-bottom:10px;line-height:1em;}ul li.comments{list-style:none;text-align:right;font-weight:bold;}ul li.comments span{display:block;font-weight:normal;margin-bottom:10px;line-height:1em;}ul ul{margin-left:25px;padding:5px 0;}html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0;}.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0;}.clearfix{display:inline-block;}.clearfix{display:block;}.hidden{display:none;visibility:hidden;}.visible-phone{display:none !important;}.visible-tablet{display:none !important;}.hidden-desktop{display:none !important;}.hidden-large{display:none !important;}.row{margin:0 -15px;}.gantry-width-block{display:block;float:left;}.gantry-width-spacer{margin:15px;}.gantry-width-10,.gantry-width-15,.gantry-width-20,.gantry-width-25,.gantry-width-30,.gantry-width-33,.gantry-width-40,.gantry-width-50,.gantry-width-60,.gantry-width-66,.gantry-width-70,.gantry-width-75,.gantry-width-80,.gantry-width-85,.gantry-width-90{position:relative;display:inline-block;float:left;}.gantry-width-10{width:10%;}.gantry-width-15{width:15%;}.gantry-width-20{width:20%;}.gantry-width-25{width:25%;}.gantry-width-30{width:30%;}.gantry-width-33{width:33.33%;}.gantry-width-40{width:40%;}.gantry-width-50{width:50%;}.gantry-width-60{width:60%;}.gantry-width-66{width:66.66%;}.gantry-width-70{width:70%;}.gantry-width-75{width:75%;}.gantry-width-80{width:80%;}.gantry-width-85{width:85%;}.gantry-width-90{width:90%;}.gantry-left{float:left;margin-right:15px;}.gantry-right{float:right;margin-left:15px;}.gantry-center{text-align:center;}.gantry-center td,.gantry-center th{text-align:center;}.component-body{padding:20px;background:#ffffff;color:#383838;}.article-info{font-size:13px;}.article-info.muted{color:inherit;}.article-info dd{margin-left:0;}.article-info-term{display:none;}.parent-category-name span,.category-name span,.create span,.modified span,.published span,.createdby span,.hits span,.comments-count span{display:none;}.parent-category-name:before,.category-name:before,.create:before,.modified:before,.published:before,.createdby:before,.hits:before,.comments-count:before{font-family:FontAwesome;margin-right:2px;text-shadow:none;}.parent-category-name:before{content:"\f0c9";}.category-name:before{content:"\f0c9";}.create:before{content:"\f017";}.modified:before{content:"\f017";}.published:before{content:"\f017";}.createdby:before{content:"\f040";}.hits:before{content:"\f019";}.content_vote,.tags{margin:10px 0;}.content_rating{display:block;}.img-intro-right,.img-fulltext-right{float:right;margin-left:10px;margin-bottom:10px;}.img-intro-left,.img-fulltext-left{float:left;margin-right:10px;margin-bottom:10px;}.categories-list{padding:0 5px;}.categories-list ul{margin:0;padding:0;}.categories-list ul li{list-style-type:none;margin:0;}.categories-list ul ul{margin-left:15px;}.categories-list dl dt,.categories-list dl dd{display:inline;}.category-desc{line-height:1.7em;margin:10px 0;padding-left:0;}.cat-children ul{list-style:none;margin:0;padding:0;}.category{width:100%;}.category td{padding:8px;}.category th{padding:8px;text-align:left;}.item-separator,.row-separator{display:block;clear:both;margin:12px 0;border:0;height:2px;}.cols-1{display:block;float:none !important;margin:0 !important;}.cols-2 .column-1,.cols-2 .column-2{width:48%;}.cols-2 .column-1{float:left;}.cols-2 .column-2{float:right;margin:0;}.cols-3 .column-1,.cols-3 .column-2{float:left;width:29%;}.cols-3 .column-1{margin-right:7%;}.cols-3 .column-2{margin-left:0;}.cols-3 .column-3{float:right;width:29%;}.cols-4 .column-1,.cols-4 .column-2,.cols-4 .column-3{float:left;width:23%;margin-right:2%;}.cols-4 .column-2{margin-left:0;}.cols-4 .column-4{float:right;width:23%;margin-right:2%;}.page-header{margin:0;padding:0;border:0;}fieldset.filters{margin:10px 0 !important;padding:0 !important;}.archive #archive-items{margin-left:0;list-style:none;}.archive .filter-search{background:none;border:0;margin:0;padding:0;}.archive .filter-search.alert{float:left;}.archive select{margin-right:5px;}.archive .createdby{display:block;}.archive .muted{color:inherit;}#article-index{float:right;border:1px solid #d5d5d5;background:#f2f2f2;border-radius:3px;margin-left:15px;}#article-index ul{list-style:none;margin:0;}#article-index ul li:first-child a{border-top-right-radius:3px;border-top-left-radius:3px;}#article-index ul li a{display:block;padding:5px 10px;font-size:12px;border-bottom:1px solid #d5d5d5;}#article-index ul li a.active{color:inherit;}#article-index ul li a:hover{background:#eaeaea;}#article-index ul li:last-child a{border-bottom:none !important;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}.article-index{margin-left:15px;}.article-index .nav-tabs.nav-stacked > li > a{font-size:12px;padding:5px 10px;border:1px solid #d5d5d5;background:#f2f2f2;}.article-index .nav-tabs.nav-stacked > li > a:hover{background:#eaeaea;}.pagination{margin:10px 0;padding:10px 0;clear:both;text-align:center;}.pagination .counter{float:none;text-align:center;margin:0;margin-bottom:5px;}.pagination ul{list-style-type:none;margin:0;padding:0;text-align:center;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.pagination ul li{display:inline-block;text-align:center;margin:0 5px;}.pagination ul li a,.pagination ul li span{float:none;margin:0 5px;padding:0;background:none;border:none;text-shadow:none;}.pagination ul li a:hover,.pagination ul li span:hover{background:none;}.pagination-start,.pagination-next,.pagination-end,.pagination-prev{border:0;}.pagination-start{padding:0;}.pagination-start span{padding:0;}.pagenav{list-style:none;margin:0;}.pagenav:after{display:inline-block;content:"";clear:both;}.pagenav-prev{float:left;}.pagenav-next{float:right;}.pager li{margin:0 5px;}.pager a,.pager span{background:none;border:0;padding:0;}.pager a:hover,.pager span:hover{background:none;}legend{font-size:20px;border-bottom:1px solid #d5d5d5;}legend small{color:#d5d5d5;}form fieldset dt{clear:left;float:left;width:12em;padding:3px 0;}form fieldset dd{float:left;padding:3px 0;}.invalid{border-color:#ff0000 !important;}label.invalid{color:#ff0000 !important;}input[type="radio"],input[type="checkbox"]{margin:0 5px;}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly],.uneditable-input,.uneditable-textarea{color:#b8b8b8;background-color:#ffffff;border:1px solid #d5d5d5;}.input-prepend .add-on,.input-append .add-on{background:#f2f2f2;border:1px solid #d5d5d5;}.input-prepend.input-append .media-preview,.input-append.input-append .media-preview{margin:0;}.btn.disabled,.btn[disabled],.btn.disabled:hover,.btn[disabled]:hover{background-color:#e6e6e6 !important;color:#808080;}.btn-primary.disabled,.btn-primary[disabled],.btn-primary.disabled:hover,.btn-primary[disabled]:hover{background-color:#c92c7b !important;color:#ffffff !important;}table{border-collapse:collapse;}table.table-bordered{border-collapse:separate;}table.table-bordered th{background-color:#f2f2f2;}.well{background-color:transparent;border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.nav-tabs.nav-stacked > li > a{background-color:#f2f2f2;}.nav-tabs.nav-stacked > li > a:hover{background-color:#eaeaea;}.list-striped li:nth-child(odd),.list-striped dd:nth-child(odd),.row-striped .row:nth-child(odd),.row-striped .row-fluid:nth-child(odd),.cat-list-row0{background-color:#f2f2f2;}.list-striped li:hover,.list-striped dd:hover,.row-striped .row:hover,.row-striped .row-fluid:hover,.cat-list-row0:hover,.cat-list-row1:hover{background-color:#eaeaea;}.searchintro{font-weight:normal;margin:20px 0 20px;}#searchForm .inputbox{margin-bottom:0;}#searchForm input[type="radio"],#searchForm input[type="checkbox"]{margin-top:3px;margin-right:5px;float:none;vertical-align:top;}#searchForm,#finder-search{padding:0 5px;}.form-limit{margin:20px 0 0;text-align:right;padding:0 10px 0 20px;}.highlight{font-weight:bold;}.ordering-box{float:right;}.phrases-box{width:60%;float:left;}.only,.phrases{margin:10px 0 0 0;line-height:1.3em;}.search label{padding-top:0 !important;display:inline-block;}label.ordering{display:block;margin:10px 0 10px 0;}.word{padding:10px 10px 10px 0;}.word input{font-weight:bold;padding:4px;font-size:14px;}.word label{font-weight:bold;}fieldset.only label,fieldset.phrases label{margin:0 10px 0 0;}.ordering-box label.ordering{margin:0 10px 5px 0;}form .search label,form .finder label{display:none;}form #finder-filter-select-list label{display:block;margin-top:10px;margin-bottom:2px;}.search dd{padding:2px 15px 2px 5px;}.result-title{padding:15px 15px 0 5px;font-weight:bold;}.result-text{padding:10px 15px 10px 5px;line-height:1.7em;}.result-url{font-size:14px;padding:2px 15px 15px 5px;}.result-created{padding:2px 15px 15px 5px;font-size:12px;}.result-category{padding:10px 15px 5px 5px;}ul.menu{list-style:none;margin:0;padding:0;}ul.menu ul{list-style:none;}ul.menu li{margin-bottom:2px;}ul.menu li a,ul.menu li .item,ul.menu li .separator{display:block;}ul.menu li a:before,ul.menu li .item:before,ul.menu li .separator:before{content:"\f138";font-family:FontAwesome;margin-right:10px;display:inline;}ul.menu li:last-child{margin-bottom:0;}ul.menu li ul{margin:0 0 0 20px;padding:8px 0 0;}ul.menu li.active.current,ul.menu li#current.active{border:0;padding:0;}ul.menu li.active.current > a,ul.menu li#current.active > a{color:#282828;}ul.menu li.active.current > a:before,ul.menu li.active.current > .item:before,ul.menu li.active.current > .separator:before,ul.menu li#current.active > a:before,ul.menu li#current.active > .item:before,ul.menu li#current.active > .separator:before{content:"\f0a9";}ul.menu ul.small{font-size:14px;}ul.menu.nav > li > a:hover{background:none;}.items-more{padding-top:10px;}.items-more h3{font-weight:normal;margin:0;padding:0;font-size:1.4em;}.items-more ol{line-height:1.3em;list-style-type:none;margin:0;padding:10px 0 10px 2px;}.items-more ol li{margin-bottom:5px;}.items-more ol li a{display:inline;font-weight:normal;padding:0;}.items-more ol li a:before{font-family:FontAwesome;content:"\f054";margin-right:4px;}.post-tags .module-content a{margin-right:3px;margin-bottom:10px;}.post-tags .module-content a:before{font-family:FontAwesome;margin-right:5px;content:"\f02b";}.component-content .sticky{background:#eaeaea;padding:0 10px 5px;}.page-pagination{font-size:110%;font-weight:100;}.search-results .highlight{background:#FBDE21;color:#000;}.aligncenter,div.aligncenter{display:block;margin:0 auto;}.alignright{float:right;}.alignleft{float:left;}a img.alignright{float:right;margin:5px 0 20px 20px;}a img.alignnone{margin:5px 20px 20px 0;}a img.alignleft{float:left;margin:5px 20px 20px 0;}a img.aligncenter{display:block;margin-left:auto;margin-right:auto;}.wp-caption{background:#ffffff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center;}.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto;}.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:5px 4px;}.wp-caption.alignnone{margin:5px 20px 20px 0;}.wp-caption.alignleft{margin:5px 20px 20px 0;}.wp-caption.alignright{margin:5px 0 20px 20px;}@font-face{font-family:'FontAwesome';src:url('../../../plugins/gantry/assets/jui/fonts/fontawesome-webfont.eot?v=3.2.1');src:url('../../../plugins/gantry/assets/jui/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../../../plugins/gantry/assets/jui/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../../../plugins/gantry/assets/jui/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../../../plugins/gantry/assets/jui/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}

Examples and source code

icon-chevron-sign-right

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

<i class=" icon-chevron-sign-right"></i> icon-chevron-sign-right
Icon classes are echoed via CSS :before.

icon-chevron-sign-right

icon-chevron-sign-right

icon-chevron-sign-right

icon-chevron-sign-right

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-chevron-sign-right icon-large"></i> icon-chevron-sign-right</p>
<p><i class=" icon-chevron-sign-right icon-2x"></i> icon-chevron-sign-right</p>
<p><i class=" icon-chevron-sign-right icon-3x"></i> icon-chevron-sign-right</p>
<p><i class=" icon-chevron-sign-right icon-4x"></i> icon-chevron-sign-right</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-chevron-sign-right"></i>Font Awesome icon can be used</li>
  <li><i class="icon-li  icon-chevron-sign-right 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-chevron-sign-right 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-chevron-sign-right"></i>  normal<br>
<i class=" icon-chevron-sign-right icon-rotate-90"></i>  icon-rotate-90<br>
<i class=" icon-chevron-sign-right icon-rotate-180"></i>  icon-rotate-180<br>
<i class=" icon-chevron-sign-right icon-rotate-270"></i>  icon-rotate-270<br>
<i class=" icon-chevron-sign-right icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-chevron-sign-right icon-flip-vertical"></i>  icon-flip-vertical

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

<i class=" icon-chevron-sign-right icon-2x icon-spin"></i>
<i class=" icon-chevron-sign-right icon-3x icon-spin"></i>
<i class=" icon-chevron-sign-right icon-4x icon-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

icon-chevron-sign-right on icon-check-empty
icon-chevron-sign-right on icon-circle
icon-chevron-sign-rightl on icon-sign-blank
icon-ban-circle on icon-chevron-sign-right

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-chevron-sign-right "></i>
</span>
icon-chevron-sign-right on icon-check-empty<br>
<span class="icon-stack">
  <i class=" icon-circle icon-stack-base"></i>
  <i class=" icon-chevron-sign-right icon-light"></i>
</span>
icon-chevron-sign-right on icon-circle<br>
<span class="icon-stack">
  <i class=" icon-sign-blank icon-stack-base"></i>
  <i class=" icon-chevron-sign-right icon-light "></i>
</span>
icon-chevron-sign-right on icon-sign-blank<br>
<span class="icon-stack">
  <i class=" icon-chevron-sign-right icon-light"></i>
  <i class=" icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-ban-circle on icon-chevron-sign-right