Font Awesome icon usage statistics

  • 2 types of Font Awesome iconic font are used and found 2 times in total.
  • PDS.DE used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of PDS.DE are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • PDS.DE includes "http://www.pds.de/cms/sites/default/files/css/css_9z9D-ONMY4pOgWa0vEt5OOVWv7ze9d4B56MpzTI6E28.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:"SocialFoundicons";src:url(/cms/sites/all/themes/blocks/foundation/fonts/social_foundicons.eot);src:url(/cms/sites/all/themes/blocks/foundation/fonts/social_foundicons.eot?#iefix) format("embedded-opentype"),url(/cms/sites/all/themes/blocks/foundation/fonts/social_foundicons.woff) format("woff"),url(/cms/sites/all/themes/blocks/foundation/fonts/social_foundicons.ttf) format("truetype"),url(/cms/sites/all/themes/blocks/foundation/fonts/social_foundicons.svg#SocialFoundicons) format("svg");font-weight:normal;font-style:normal;}[class*="social foundicon-"]{display:inline;width:auto;height:auto;line-height:inherit;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}[class*="social foundicon-"]:before{font-family:"SocialFoundicons";font-weight:normal;font-style:normal;text-decoration:inherit;}.foundicon-thumb-up:before{content:"\f000";}.foundicon-thumb-down:before{content:"\f001";}.foundicon-rss:before{content:"\f002";}.foundicon-facebook:before{content:"\f003";}.foundicon-twitter:before{content:"\f004";}.foundicon-pinterest:before{content:"\f005";}.foundicon-github:before{content:"\f006";}.foundicon-path:before{content:"\f007";}.foundicon-linkedin:before{content:"\f008";}.foundicon-dribbble:before{content:"\f009";}.foundicon-stumble-upon:before{content:"\f00a";}.foundicon-behance:before{content:"\f00b";}.foundicon-reddit:before{content:"\f00c";}.foundicon-google-plus:before{content:"\f00d";}.foundicon-youtube:before{content:"\f00e";}.foundicon-vimeo:before{content:"\f00f";}.foundicon-flickr:before{content:"\f010";}.foundicon-slideshare:before{content:"\f011";}.foundicon-picassa:before{content:"\f012";}.foundicon-skype:before{content:"\f013";}.foundicon-steam:before{content:"\f014";}.foundicon-instagram:before{content:"\f015";}.foundicon-foursquare:before{content:"\f016";}.foundicon-delicious:before{content:"\f017";}.foundicon-chat:before{content:"\f018";}.foundicon-torso:before{content:"\f019";}.foundicon-tumblr:before{content:"\f01a";}.foundicon-video-chat:before{content:"\f01b";}.foundicon-digg:before{content:"\f01c";}.foundicon-wordpress:before{content:"\f01d";}
    @font-face{font-family:"GeneralFoundicons";src:url(/cms/sites/all/themes/blocks/foundation/fonts/general_foundicons.eot);src:url(/cms/sites/all/themes/blocks/foundation/fonts/general_foundicons.eot?#iefix) format("embedded-opentype"),url(/cms/sites/all/themes/blocks/foundation/fonts/general_foundicons.woff) format("woff"),url(/cms/sites/all/themes/blocks/foundation/fonts/general_foundicons.ttf) format("truetype"),url(/cms/sites/all/themes/blocks/foundation/fonts/general_foundicons.svg#GeneralFoundicons) format("svg");font-weight:normal;font-style:normal;}[class*="general foundicon-"]{display:inline;width:auto;height:auto;line-height:inherit;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}[class*="general foundicon-"]:before{font-family:"GeneralFoundicons";font-weight:normal;font-style:normal;text-decoration:inherit;}.foundicon-settings:before{content:"\f000";}.foundicon-heart:before{content:"\f001";}.foundicon-star:before{content:"\f002";}.foundicon-plus:before{content:"\f003";}.foundicon-minus:before{content:"\f004";}.foundicon-checkmark:before{content:"\f005";}.foundicon-remove:before{content:"\f006";}.foundicon-mail:before{content:"\f007";}.foundicon-calendar:before{content:"\f008";}.foundicon-page:before{content:"\f009";}.foundicon-tools:before{content:"\f00a";}.foundicon-globe:before{content:"\f00b";}.foundicon-home:before{content:"\f00c";}.foundicon-quote:before{content:"\f00d";}.foundicon-people:before{content:"\f00e";}.foundicon-monitor:before{content:"\f00f";}.foundicon-laptop:before{content:"\f010";}.foundicon-phone:before{content:"\f011";}.foundicon-cloud:before{content:"\f012";}.foundicon-error:before{content:"\f013";}.foundicon-right-arrow:before{content:"\f014";}.foundicon-left-arrow:before{content:"\f015";}.foundicon-up-arrow:before{content:"\f016";}.foundicon-down-arrow:before{content:"\f017";}.foundicon-trash:before{content:"\f018";}.foundicon-add-doc:before{content:"\f019";}.foundicon-edit:before{content:"\f01a";}.foundicon-lock:before{content:"\f01b";}.foundicon-unlock:before{content:"\f01c";}.foundicon-refresh:before{content:"\f01d";}.foundicon-paper-clip:before{content:"\f01e";}.foundicon-video:before{content:"\f01f";}.foundicon-photo:before{content:"\f020";}.foundicon-graph:before{content:"\f021";}.foundicon-idea:before{content:"\f022";}.foundicon-mic:before{content:"\f023";}.foundicon-cart:before{content:"\f024";}.foundicon-address-book:before{content:"\f025";}.foundicon-compass:before{content:"\f026";}.foundicon-flag:before{content:"\f027";}.foundicon-location:before{content:"\f028";}.foundicon-clock:before{content:"\f029";}.foundicon-folder:before{content:"\f02a";}.foundicon-inbox:before{content:"\f02b";}.foundicon-website:before{content:"\f02c";}.foundicon-smiley:before{content:"\f02d";}.foundicon-search:before{content:"\f02e";}
    @font-face{font-family:'FontAwesome';src:url(/cms/sites/all/themes/blocks/css/./font/fontawesome-webfont.eot?v=3.1.0);src:url(/cms/sites/all/themes/blocks/css/./font/fontawesome-webfont.eot?#iefix&v=3.1.0) format('embedded-opentype'),url(/cms/sites/all/themes/blocks/css/./font/fontawesome-webfont.woff?v=3.1.0) format('woff'),url(/cms/sites/all/themes/blocks/css/./font/fontawesome-webfont.ttf?v=3.1.0) format('truetype'),url(/cms/sites/all/themes/blocks/css/./font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0) format('svg');font-weight:normal;font-style:normal;}

Examples and source code

icon-chevron-right

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

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

icon-chevron-right

icon-chevron-right

icon-chevron-right

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

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