Font Awesome icon usage statistics

  • 1 types of Font Awesome iconic font are used and found 1 times in total.
  • TRUTHBOOK.COM used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of TRUTHBOOK.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • TRUTHBOOK.COM includes "http://truthbook.com/css/groundworkTEST.css" to use Font Awesome and information from CSS is like below.
  • @font-face {
    	font-family: AverageSans;
    	font-style: normal;
    	font-weight: 400;
    	src: url(../fonts/average-sans-webfont.eot);
    	src: url(../fonts/average-sans-webfont.eot#iefix) format("embedded-opentype"), url(../fonts/average-sans-webfont.woff) format("woff"), url(../fonts/average-sans-webfont.ttf) format("truetype")
    }
    .AverageSans {
    	font-family: AverageSans, Helvetica, Arial, Geneva, sans-serif
    }
    @font-face {
    	font-family: AmericanTypewriter;
    	font-style: normal;
    	font-weight: 400;
    	src: url(../fonts/americantypewriterstd-bold.eot);
    	src: url(../fonts/americantypewriterstd-bold.eot#iefix) format("embedded-opentype"), url(../fonts/americantypewriterstd-bold.woff) format("woff"), url(../fonts/americantypewriterstd-bold.ttf) format("truetype")
    }
    .AmericanTypewriter {
    	font-family: AmericanTypewriter, Helvetica, Arial, Geneva, sans-serif
    }
    * html {
    	font-size: 87.5%
    }
    html {
    	font-size: 14px;
    	line-height: 1.28571em
    }
    html, body {
    	font-family: Helvetica, Arial, Geneva, sans-serif;
    	color: #2b2b2d
    }
    a, a:visited {
    	color: #489ac1;
    	-webkit-transition: color .25s;
    	transition: color .25s;
    	text-decoration: none;
    }
    a:hover, a:focus {
    	color: #198d98;
    	text-decoration: underline
    }
    h1, h2, h3, h4, h5, h6 {
    	margin-bottom: 15px
    }
    h1 {
    	font-weight: 200;
    	font-size: 2.33333em;
    	line-height: 1.65306em
    }
    h2 {
    	font-weight: 200;
    	font-size: 2em;
    	line-height: 1.28571em
    }
    h3 {
    	font-weight: 500;
    	font-size: 1.5em;
    	line-height: 1.71429em
    }
    h4 {
    	font-weight: 500;
    	font-size: 1.33333em;
    	line-height: 1.92857em
    }
    h5 {
    	font-weight: 900;
    	font-size: 1.16667em;
    	line-height: 2.20408em
    }
    h6 {
    	font-weight: 900;
    	font-size: 1.16667em;
    	line-height: 2.20408em;
    	text-transform: uppercase
    }
    p, ul, ol, dl {
    	margin-bottom: 10px;
    	font-weight: 400
    }
    ul, ol {
    	margin-left: 40px
    }
    ul li, ol li, ul.list>li, ol.list>li {
    	display: list-item
    }
    dl dt {
    	font-weight: 700
    }
    dl dd {
    	padding-left: 1em;
    	margin-bottom: 10px
    }
    ul.list, ol.list, ul.unstyled, ol.unstyled {
    	list-style: none
    }
    ul.list {
    	margin-left: 0
    }
    ul.list li:before {
    	content: '\f00c';
    	display: inline-block;
    	width: 1.1em;
    	margin-right: .25em;
    	font-family: FontAwesome;
    	font-weight: 400;
    	font-style: normal;
    	text-decoration: inherit;
    	-webkit-font-smoothing: antialiased;
    *margin-right:.3em;
    	font-size: 1.2em;
    	vertical-align: baseline;
    	background-image: none;
    	background-position: 0 0;
    	background-repeat: repeat;
    	margin-top: 0
    }
    ol.list {
    	counter-reset: li;
    	margin-left: 1.5em;
    	line-height: 1.6
    }
    ol.list li {
    	position: relative;
    	padding: 2px 6px 0
    }
    ol.list li:before {
    	content: counter(li);
    	counter-increment: li;
    	position: absolute;
    	top: .1em;
    	left: -2em;
    	width: 2em;
    	text-align: center;
    	padding: .3em .1em .1em;
    	font-size: .8em;
    	line-height: 1.5;
    	color: #fff;
    	background: #2b2b2d;
    	font-weight: 700;
    	-ms-border-radius: 4px;
    	-o-border-radius: 4px;
    	border-radius: 4px;
    *behavior:url(/js/libs/PIE.htc)
    }
    blockquote {
    	margin-left: 2em;
    	margin-bottom: .75em;
    }
    /*blockquote {
    	padding: 1.3em 4em 1em;
    	color: #2b2b2d;
    	font-size: 1em;
    	line-height: 1.47857em;
    	font-weight: 700;
    	position: relative;
    	z-index: 0;
    	background: #e6e6e6;
    	-ms-border-radius: 4px;
    	-o-border-radius: 4px;
    	border-radius: 4px
    }
    blockquote:before {
    	content: '\201C';
    	color: #ccc;
    	font-size: 6em;
    	display: block;
    	position: absolute;
    	top: .4em;
    	left: .1em;
    	z-index: -1
    }
    blockquote:after {
    	content: '\201D';
    	color: #ccc;
    	font-size: 6em;
    	display: block;
    	position: absolute;
    	top: .4em;
    	right: .1em;
    	z-index: -1
    }*/
    cite {
    	display: block;
    	position: relative;
    	left: -1em;
    	margin-top: .25em;
    	font-size: 1em;
    	line-height: 1.22143em;
    	font-weight: 400;
    	font-style: normal;
    	color: #505054
    }
    cite:before {
    	content: '\2014'
    }
    abbr[title], dfn[title], abbr[data-title], dfn[data-title] {
    	border-bottom: 1px dotted;
    	cursor: help
    }
    em {
    	font-style: italic
    }
    b, strong {
    	font-weight: 900
    }
    code, pre {
    	font-family: monospace
    }
    del, strike {
    	text-decoration: line-through
    }
    code {
    	white-space: pre-wrap;
    	word-wrap: break-word;
    	min-height: 1em;
    	display: inline-block;
    	background: #ccc;
    	border: 0;
    	padding: 0 .3em;
    	margin: 0 .2em;
    	font-weight: 400;
    	line-height: inherit
    }
    pre {
    	color: #f2f2f2;
    	background: #050505;
    	font-size: 1em;
    	line-height: 1.28571em;
    	padding: .5em;
    	display: block;
    	border-left: 2.6em solid #383838;
    	counter-reset: linenumber
    }
    pre code {
    	display: block;
    	background: inherit;
    	margin: 0;
    	padding: 0
    }
    pre code:before {
    	text-align: right;
    	color: #9a9a9a;
    	counter-increment: linenumber;
    	content: counter(linenumber) ".";
    	position: absolute;
    	left: .65em;
    	width: 2.6em
    }
    .info {
    	color: #3a87ad
    }
    .alert {
    	color: #c09853
    }
    .warning {
    	color: #ff971e
    }
    .error {
    	color: #b94a48
    }
    .success {
    	color: #468847
    }
    .js .responsive:not(table) {
    	-webkit-transition: font .25s;
    	transition: font .25s
    }
    ::-moz-selection {
    background:#489ac1;
    	color: #fff;
    text-shadow:none
    }
    ::selection {
    	background: #489ac1;
    	color: #fff;
    	text-shadow: none
    }
    ol.list.green li:before {
    	background: #2ecc71
    }
    ol.list.blue li:before {
    	background: #3498db
    }
    ol.list.purple li:before {
    	background: #9b59b6
    }
    ol.list.yellow li:before {
    	background: #f1c40f
    }
    ol.list.orange li:before {
    	background: #e67e22
    }
    ol.list.red li:before {
    	background: #e74c3c
    }
    ol.list.pink li:before {
    	background: #f02475
    }
    ol.list.turquoise li:before {
    	background: #1abc9c
    }
    ol.list.asphalt li:before {
    	background: #34495e
    }
    ol.list li.green:before {
    	background: #2ecc71
    }
    ol.list li.blue:before {
    	background: #3498db
    }
    ol.list li.purple:before {
    	background: #9b59b6
    }
    ol.list li.yellow:before {
    	background: #f1c40f
    }
    ol.list li.orange:before {
    	background: #e67e22
    }
    ol.list li.red:before {
    	background: #e74c3c
    }
    ol.list li.pink:before {
    	background: #f02475
    }
    ol.list li.turquoise:before {
    	background: #1abc9c
    }
    ol.list li.asphalt:before {
    	background: #34495e
    }
    .green {
    	color: #2ecc71
    }
    .blue {
    	color: #3498db
    }
    .purple {
    	color: #9b59b6
    }
    .yellow {
    	color: #f1c40f
    }
    .orange {
    	color: #e67e22
    }
    .red {
    	color: #e74c3c
    }
    .pink {
    	color: #f02475
    }
    .turquoise {
    	color: #1abc9c
    }
    .asphalt {
    	color: #34495e
    }
    @font-face {
    	font-family: FontAwesome;
    	src: url(../fonts/fontawesome-webfont.eot?v=3.2.1);
    	src: url(../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff?v=3.2.1) format("woff"), url(../fonts/fontawesome-webfont.ttf?v=3.2.1) format("truetype"), url(../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1) format("svg");
    	font-weight: 400;
    	font-style: normal
    }

Examples and source code

icon-chevron-sign-left

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

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

icon-chevron-sign-left

icon-chevron-sign-left

icon-chevron-sign-left

icon-chevron-sign-left

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-chevron-sign-left on icon-check-empty
icon-chevron-sign-left on icon-circle
icon-chevron-sign-leftl on icon-sign-blank
icon-ban-circle on icon-chevron-sign-left

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