Font Awesome icon usage statistics

  • 4 types of Font Awesome iconic font are used and found 9 times in total.
  • PROGETTOAROMA.COM used 2.3 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of PROGETTOAROMA.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • PROGETTOAROMA.COM includes "http://www.PROGETTOAROMA.COM/templates/ts_dotcom/css-compiled/master-a12e3ec24ccb127618310b20b746f714.css" to use Font Awesome and information from CSS is like below.
  • @font-face {
      font-family: 'latoregular';
      src: url('../fonts/Lato/lato-regular-webfont.eot');
      src: url('../fonts/Lato/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Lato/lato-regular-webfont.woff') format('woff'), url('../fonts/Lato/lato-regular-webfont.ttf') format('truetype'), url('../fonts/Lato/lato-regular-webfont.svg#latoregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'latobold';
      src: url('../fonts/Lato/lato-bold-webfont.eot');
      src: url('../fonts/Lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Lato/lato-bold-webfont.woff') format('woff'), url('../fonts/Lato/lato-bold-webfont.ttf') format('truetype'), url('../fonts/Lato/lato-bold-webfont.svg#latobold') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'source_sans_prolight';
      src: url('../fonts/Source_Sans_Pro/sourcesanspro-light-webfont.eot');
      src: url('../fonts/Source_Sans_Pro/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Source_Sans_Pro/sourcesanspro-light-webfont.woff') format('woff'), url('../fonts/Source_Sans_Pro/sourcesanspro-light-webfont.ttf') format('truetype'), url('../fonts/Source_Sans_Pro/urcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    body {
      font-family: latoregular;
      margin: 0;
    }
    h1,
    h2,
    h3,
    h4 {
      font-family: source_sans_prolight !important;
      font-weight: 200;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
    }
    a {
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #rt-transition.rt-hidden {
      opacity: 0;
    }
    #rt-transition.rt-visible {
      opacity: 1;
      -webkit-transition: opacity 0.4s ease-in;
      -moz-transition: opacity 0.4s ease-in;
      -o-transition: opacity 0.4s ease-in;
      transition: opacity 0.4s ease-in;
      -webkit-transition: opacity 0.4s ease-in;
      -moz-transition: opacity 0.4s ease-in;
      -o-transition: opacity 0.4s ease-in;
      transition: opacity 0.4s ease-in;
    }
    .title,
    .component-content h2 {
      font-weight: normal;
      letter-spacing: normal;
      margin-top: 0;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    #rt-top-surround .title,
    #rt-showcase .title {
      border: none;
      box-shadow: none;
    }
    .title1 .title {
      margin: -11px -16px 20px -16px;
      padding: 10px 15px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .title2 .title {
      margin: -10px -15px 20px -15px;
      padding: 10px 15px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .title3 .title {
      margin: -10px -15px 20px -15px;
      padding: 10px 15px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .box1,
    .box2,
    .box3 {
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .box1 .module-surround {
      margin: -1px;
    }
    #rt-sidebar-a ul.menu,
    #rt-sidebar-b ul.menu {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #rt-sidebar-a ul.menu ul,
    #rt-sidebar-b ul.menu ul {
      list-style: none;
    }
    #rt-sidebar-a ul.menu li,
    #rt-sidebar-b ul.menu li {
      margin-bottom: 8px;
    }
    #rt-sidebar-a ul.menu li a,
    #rt-sidebar-a ul.menu li .item,
    #rt-sidebar-a ul.menu li .separator,
    #rt-sidebar-b ul.menu li a,
    #rt-sidebar-b ul.menu li .item,
    #rt-sidebar-b ul.menu li .separator {
      display: block;
      font-size: 1.1em;
    }
    #rt-sidebar-a ul.menu li a:before,
    #rt-sidebar-a ul.menu li .item:before,
    #rt-sidebar-a ul.menu li .separator:before,
    #rt-sidebar-b ul.menu li a:before,
    #rt-sidebar-b ul.menu li .item:before,
    #rt-sidebar-b ul.menu li .separator:before {
      content: "\f105";
      font-family: FontAwesome;
      margin-right: 10px;
      display: inline;
      font-size: 14px;
      font-weight: normal;
    }
    #rt-sidebar-a ul.menu li.active a,
    #rt-sidebar-b ul.menu li.active a {
      color: #868686;
    }
    #rt-sidebar-a ul.menu li.active.current > a:before,
    #rt-sidebar-a ul.menu li.active.current > .item:before,
    #rt-sidebar-a ul.menu li.active.current > .separator:before,
    #rt-sidebar-a ul.menu li#current.active > a:before,
    #rt-sidebar-a ul.menu li#current.active > .item:before,
    #rt-sidebar-a ul.menu li#current.active > .separator:before,
    #rt-sidebar-b ul.menu li.active.current > a:before,
    #rt-sidebar-b ul.menu li.active.current > .item:before,
    #rt-sidebar-b ul.menu li.active.current > .separator:before,
    #rt-sidebar-b ul.menu li#current.active > a:before,
    #rt-sidebar-b ul.menu li#current.active > .item:before,
    #rt-sidebar-b ul.menu li#current.active > .separator:before {
      content: "\f054";
      font-size: 1em;
      margin-right: 11px;
    }
    #rt-sidebar-a ul.menu ul.small,
    #rt-sidebar-b ul.menu ul.small {
      font-size: 14px;
    }
    .gantry-example {
      position: relative;
      margin: 15px 0;
      padding: 39px 19px 14px;
      *padding-top: 19px;
      background-color: #fff;
      border: 1px solid #dddddd;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .gantry-example .table,
    .gantry-example .well,
    .gantry-example blockquote {
      margin-bottom: 5px;
    }
    .gantry-example .lead {
      font-size: 18px;
      line-height: 24px;
    }
    .gantry-example > p:last-child {
      margin-bottom: 0;
    }
    .gantry-example + .prettyprint {
      margin-top: -20px;
      padding-top: 15px;
    }
    .gantry-example:after {
      content: "Example";
      position: absolute;
      top: -1px;
      left: -1px;
      padding: 3px 7px;
      font-size: 12px;
      font-weight: bold;
      background-color: #f5f5f5;
      border: 1px solid #dddddd;
      color: #9da0a4;
      border-radius: 4px 0 4px 0;
      -webkit-border-radius: 4px 0 4px 0;
      -moz-border-radius: 4px 0 4px 0;
      border-radius: 4px 0 4px 0;
      -webkit-border-radius: 4px 0 4px 0;
      -moz-border-radius: 4px 0 4px 0;
      border-radius: 4px 0 4px 0;
      font-style: normal;
    }
    form.gantry-example {
      padding-bottom: 19px;
    }
    .gantry-img img,
    img.gantry-img {
      max-width: 100%;
      height: auto;
    }
    .powered-by {
      display: block;
      width: 120px;
      height: 32px;
      margin: 0 auto;
      opacity: 0.8;
      -webkit-transition: opacity 0.2s ease-in;
      -moz-transition: opacity 0.2s ease-in;
      -o-transition: opacity 0.2s ease-in;
      transition: opacity 0.2s ease-in;
      -webkit-transition: opacity 0.2s ease-in;
      -moz-transition: opacity 0.2s ease-in;
      -o-transition: opacity 0.2s ease-in;
      transition: opacity 0.2s ease-in;
    }
    .powered-by:hover {
      opacity: 1;
    }
    #rt-accessibility .rt-desc {
      float: left;
      margin-right: 8px;
      font-weight: bold;
    }
    #rt-accessibility #rt-buttons .button {
      line-height: 1em;
      padding: 0;
      width: 14px;
      height: 14px;
      text-align: center;
    }
    #rt-accessibility #rt-buttons .small {
      font-size: inherit;
    }
    #rt-accessibility #rt-buttons .small .button:after {
      content: '-';
    }
    #rt-accessibility #rt-buttons .large .button:after {
      content: '+';
    }
    #rt-sidebar-a h2.title {
      font-size: 28px;
    }
    .title1 .title {
      background: #ffffff;
      border: 1px solid #e9e9e9;
    }
    .title2 .title {
      background: #ccc url(../images/patterns/noise.png);
    }
    .title4 .title {
      margin: -10px -15px 20px -15px;
      padding: 10px 15px;
      border: 2px dashed #e9e9e9;
    }
    .box1 {
      border: 1px solid #e9e9e9;
    }
    .box2 {
      background: #ccc url(../images/patterns/noise.png);
    }
    .box3 {
      border: 2px dashed #e9e9e9;
    }
    #rt-showcase .box1 .title,
    #rt-showcase .box2 .title,
    #rt-top-surround .box1 .title,
    #rt-top-surround .box2 .title {
      border-bottom: 1px solid #e9e9e9;
    }
    #rt-showcase .title1 .title,
    #rt-top-surround .title1 .title {
      border: 1px solid #e9e9e9;
    }
    ul.menu li.active.current > a,
    ul.menu li.active.current > .item,
    ul.menu li.active.current > .separator,
    ul.menu li#current.active > a,
    ul.menu li#current.active > .item,
    ul.menu li#current.active > .separator {
      color: #303030;
    }
    .powered-by {
      background: url(../images/logo/powered.png);
    }
    .blog .pagination {
      margin-left: 0;
    }
    .pagenav li {
      background: #f0f0f0;
      border: 1px solid #e9e9e9;
      box-shadow: inset 0 0 0 1px #ffffff, 0 1px 2px rgba(0,0,0,0.2);
    }
    .login-fields #username,
    .login-fields #password,
    #contact-form dd input,
    #contact-form dd textarea,
    #modlgn-username,
    #modlgn-passwd,
    #jform_email,
    #member-registration dd input,
    #search-searchword,
    .finder .inputbox,
    .inputbox {
      border: 1px solid #e9e9e9;
    }
    .component-content .contact .title {
      background-color: #f1f1f1;
      background-image: -moz-linear-gradient(top,#ffffff,#dddddd);
      background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));
      background-image: -webkit-linear-gradient(top,#ffffff,#dddddd);
      background-image: -o-linear-gradient(top,#ffffff,#dddddd);
      background-image: linear-gradient(to bottom,#ffffff,#dddddd);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0);
      background-color: #f1f1f1;
      background-image: -moz-linear-gradient(top,#ffffff,#dddddd);
      background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));
      background-image: -webkit-linear-gradient(top,#ffffff,#dddddd);
      background-image: -o-linear-gradient(top,#ffffff,#dddddd);
      background-image: linear-gradient(to bottom,#ffffff,#dddddd);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0);
      border: 1px solid #e9e9e9;
      text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    }
    .breadcrumbs,
    .breadcrumb {
      background: none;
    }
    .breadcrumbs a:after,
    .breadcrumb a:after {
      color: #aaaaaa;
    }
    .breadcrumbs .showHere,
    .breadcrumb .showHere {
      font-weight: bold;
      margin-right: 5px;
    }
    .article-info dd:before {
      text-shadow: 1px 1px 0 #ffffff;
    }
    .tip-wrap {
      background: #ffffff;
      -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
      -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
      -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      color: #6e6e6e;
    }
    .system-unpublished .system-unpublished {
      background: #ffffff;
      border-color: #d5d5d5;
    }
    abbr[title] {
      border-bottom: 1px dotted #d5d5d5;
    }
    blockquote {
      border-left: 5px solid #d5d5d5;
    }
    blockquote small {
      color: #aaaaaa;
    }
    blockquote.pull-right {
      border-right: 5px solid #d5d5d5;
    }
    legend {
      color: #303030;
      border-bottom: 1px solid #d5d5d5;
    }
    legend small {
      color: #d5d5d5;
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"] {
      min-height: 40px;
    }
    .contact-form .control-label {
      text-align: left;
    }
    select {
      border: 1px solid #d5d5d5;
    }
    .offline input[type="text"],
    .offline input[type="password"] {
      padding: 0 5px;
    }
    .uneditable-input,
    .uneditable-textarea {
      color: #aaaaaa;
      background-color: #f5f5f5;
      border-color: #d5d5d5;
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
    }
    input[disabled],
    select[disabled],
    textarea[disabled],
    input[readonly],
    select[readonly],
    textarea[readonly] {
      border-color: #d5d5d5;
    }
    .form-actions {
      background-color: #f0f0f0;
      border-top: 1px solid #d5d5d5;
    }
    .uneditable-input {
      background-color: ;
      border-color: #eeeeee;
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.025);
    }
    .help-block,
    .help-inline {
      color: ;
    }
    .well,
    .table-bordered th {
      background-color: #f0f0f0;
    }
    .nav-tabs.nav-stacked > li > a {
      background-color: #f0f0f0;
    }
    .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: #eaeaea;
    }
    .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: #fcfcfc;
    }
    p.success,
    p.info,
    p.error,
    p.warning {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      padding: 15px;
      font-weight: bold;
      border: 1px solid;
    }
    p.success a,
    p.info a,
    p.error a,
    p.warning a {
      color: #666 !important;
    }
    p.success a:hover,
    p.info a:hover,
    p.error a:hover,
    p.warning a:hover {
      color: #000 !important;
      text-shadow: none;
    }
    p.success {
      background: #dff0d8;
      border-color: #d6e9c6;
      color: #468847;
    }
    p.info {
      background: #d9edf7;
      border-color: #bce8f1;
      color: #3a87ad;
    }
    p.error {
      background: #f2dede;
      border-color: #eed3d7;
      color: #b94a48;
    }
    p.warning {
      background: #fcf8e3;
      border-color: #fbeed5;
      color: #c09853;
    }
    @font-face {
      font-family: 'FontAwesome';
      src: url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.eot?v=3.2.1');
      src: url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../../../libraries/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-caret-right

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

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

icon-caret-right

icon-caret-right

icon-caret-right

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

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