Font Awesome icon usage statistics

  • 15 types of Font Awesome iconic font are used and found 30 times in total.
  • KENNISLINK.NL used 2.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of KENNISLINK.NL are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • KENNISLINK.NL includes "http://assets.kennislink.nl/assets/main/application-967de830237c96874e5cb018571abe0c.css" to use Font Awesome and information from CSS is like below.
  • /**/:block;position:absolute;z-index:-1;filter:mask();top:-4px;left:-4px;width:200px;height:200px}.ui-autocomplete{position:absolute;cursor:default;max-height:200px;max-width:260px;overflow-y:auto}.dashboard .ui-autocomplete{max-height:400px}* html .ui-autocomplete{width:1px}.ui-autocomplete-loading{background:#fff url(//assets.kennislink.nl/assets/admin/snake-23f4fe722ca38a927f07bb71a339c2e4.gif) right center no-repeat !important}.ui-menu{-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.29);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.29);box-shadow:0px 1px 2px rgba(0,0,0,0.29);-webkit-border-radius:0 0 5px;-moz-border-radius:0 0 5px;border-radius:0 0 5px;list-style:none;padding:5px 3px;margin:0;display:block;float:left;background:white}.ui-menu .ui-menu{margin-top:-3px}.ui-menu .ui-menu-item{margin:0;padding:0;zoom:1;float:left;clear:left;width:100%;cursor:pointer}.ui-menu .ui-menu-item h4{color:#4183C4;font-weight:bold;font-size:14px;margin:0}.ui-menu .ui-menu-item p{margin:0;color:#636367;font-size:12px;font-weight:bold}.ui-menu .ui-menu-item p span{width:10px;height:10px;display:inline-block}.ui-menu .ui-menu-item a,.ui-menu .ui-menu-item a:visited,.ui-menu .ui-menu-item a:hover{text-decoration:none;display:block;padding:3px;zoom:1}.ui-menu .ui-menu-item a.ui-state-hover,.ui-menu .ui-menu-item a.ui-state-active,.ui-menu .ui-menu-item a:visited.ui-state-hover,.ui-menu .ui-menu-item a:visited.ui-state-active,.ui-menu .ui-menu-item a:hover.ui-state-hover,.ui-menu .ui-menu-item a:hover.ui-state-active{font-weight:normal;background-color:#d2d2d3}.ui-menu .ui-menu-item span.count{font-size:12px;color:#636367;padding-left:10px}section#activities h2{border-bottom:1px solid #d2d2d3;padding-bottom:10px;margin-bottom:20px}@media screen and (max-width: 767px){body.publication #editbarwrap #editbar{display:none}body.publication #ribbon .ribbon{width:auto;padding-right:10px;padding-left:10px;text-align:left}body.publication header.main{margin-bottom:20px}body.publication header.main a.menu_toggle{display:inline;float:right;padding:10px 10px 0 0;color:#fff;font-size:21px;text-decoration:none}body.publication header.main a.menu_toggle.active{color:#ff4f00}body.publication header.main div.inner{width:auto;padding-bottom:5px;padding-top:5px}body.publication header.main h1{margin-left:10px;float:none}body.publication header.main ul.nav{float:none;clear:both;display:none;margin:10px 10px 0}body.publication header.main ul.nav .subject_toggle{display:none}body.publication header.main ul.nav li{display:block;float:none;height:auto;border:none;border-top:1px solid #4b4b4c}body.publication header.main ul.nav li a{height:auto;padding:10px 0;font-size:15px}body.publication header.main form b{top:18px;left:3px}body.publication header.main form input{margin:10px 0 0 0;width:90%;font-size:15px;padding-bottom:3px}body.publication header.main form input:focus{width:90%}body.publication header.main .subjects{margin:0 10px}body.publication header.main .subjects .inner{border-top:none}body.publication header.main .subjects .inner ul{float:none;display:block;width:auto;margin:0}body.publication header.main .subjects .inner ul li{border-top:1px solid #4b4b4c;border-bottom:none}body.publication #container{width:auto;padding-left:15px;padding-right:15px}body.publication .cookie-message p{width:auto}body.publication .cookie-message p .accept{float:none;display:block}body.publication article.hentry header.publication{margin-left:0;margin-right:0;margin-top:5px}body.publication article.hentry header.publication h1{font-size:30px;line-height:35px}body.publication article.hentry .body{width:100%;float:none}body.publication article.hentry footer.publication{margin-bottom:0}body.publication aside#meta{width:100%;padding-left:0;margin-left:0;margin-right:0}body.publication aside#meta .share{display:none}body.publication object,body.publication embed,body.publication iframe{max-width:100%}body.publication #fresh{display:none}body.publication section.social .inner{width:auto;padding-left:15px;padding-right:15px}body.publication section.social .inner .feedback a{width:auto}body.publication section.social .inner .feedback a span{display:none}body.publication section.social #feedback{width:auto}body.publication section.social #feedback form #feedback_email{width:98%}body.publication footer.main .inner{width:auto;padding-left:15px;padding-right:15px}body.publication footer.main .inner ul li{display:block;float:none;padding-left:0;border-bottom:1px solid #4b4b4c;padding-bottom:5px;margin-bottom:5px}body.publication footer.main .inner p .copy{display:block;padding:0;margin-top:5px}body.publication footer.main .modal{position:fixed;top:20px;left:10px;right:10px;width:auto;margin:0}body.publication footer.main .modal.fade{top:-100px}body.publication footer.main .modal.fade.in{top:20px}body.publication footer.main #sharesheet ul,body.publication footer.main #sharesheet .rest{float:none;width:auto}body.publication footer.main #sharesheet .rest{display:block;margin-top:10px}body.publication footer.main #sharesheet .rest input{width:98%}body.publication footer.main #sharesheet .rest p{margin-bottom:5px}}@media screen and (max-width: 620px){body.publication .small{width:150px}body.publication .small img{width:150px}body.publication .medium img{float:none}body.publication .medium div.figcontent{float:none;width:auto}body.publication .large img{width:100%}}section#report{*zoom:1;margin-bottom:50px}section#report:before,section#report:after{display:table;content:""}section#report:after{clear:both}section#report header{margin:0 5px 40px}section#report header h1{margin:0;font-size:45px;font-weight:bold;line-height:40px;border-bottom:5px solid #000}section#report header h1 span{font-weight:normal;font-size:22px}section#report section.reports{display:inline;float:left;margin-left:5px;margin-right:5px;width:630px}section#report section.traffic{margin-bottom:40px}section#report section.traffic h2.month{text-transform:capitalize;font-weight:bold;margin-bottom:10px}section#report section.traffic h2.month a{display:block;float:right;color:#345;font-size:14px;font-weight:bold;margin:20px 0 0 20px;text-transform:lowercase}section#report section.traffic h2.month a:hover{color:#ff4f00;text-decoration:none}section#report section.traffic table{width:100%}section#report section.traffic table .right{text-align:right}section#report section.traffic table thead tr{font-weight:bold;color:#fff;background:#345}section#report section.traffic table tfoot td{border-top:2px solid #dfdfe0;font-weight:bold}section#report section.read_more,section#report section.also_visit{display:block}section#report section.read_more article,section#report section.also_visit article{background:#fff}section#report section.read_more article div.thumb,section#report section.also_visit article div.thumb{margin-left:0;height:67px;margin-bottom:7px}section#report section.read_more article div.title,section#report section.also_visit article div.title{width:530px}section#report section.read_more header,section#report section.also_visit header{margin:0}section#report section.read_more h2,section#report section.also_visit h2{font-weight:normal;margin-bottom:5px}section#report section.read_more footer,section#report section.also_visit footer{font-size:13px}section#report section.read_more span.stats,section#report section.also_visit span.stats{color:#000011}section#report aside{display:inline;float:left;margin-left:5px;margin-right:5px;width:270px;padding-left:40px;padding-top:42px}section#report aside ul li{list-style-type:none;margin-left:0px}section#report aside ul li{border-bottom:1px solid #737e84;padding:5px 0}section#report aside ul li a{text-transform:capitalize;color:#000011;font-weight:bold}body.publication article.hentry .entry-content.form label{margin-bottom:0px}body.publication article.hentry .entry-content.form input[type='checkbox'],body.publication article.hentry .entry-content.form input[type='radio']{margin:-2px 5px 0 0}body.publication article.hentry .entry-content.form h3{margin-top:0;margin-bottom:5px}body.publication article.hentry .entry-content.form .no-border{width:auto}body.publication article.hentry .entry-content.form .no-border td{width:230px}.widget .entry-content.form.config{margin-top:20px;width:610px;margin-right:20px}.widget .entry-content.form.config table tbody{border:none}.widget .entry-content.form.config h3:before{font-size:24px}.widget .entry-content.form.config h3.step1:before{content:"\2460\00a0"}.widget .entry-content.form.config h3.step2:before{content:"\2461\00a0"}.widget .entry-content.form.config h3.step3:before{content:"\2462\00a0"}.widget .entry-content.form.config h3.step4:before{content:"\2463\00a0"}.widget .entry-content.form.config h3.step5:before{content:"\2464\00a0"}.widget .entry-content.form.config strong{font-size:15px}.widget .entry-content.form.config label{display:block;font-weight:bold;cursor:pointer;font-size:15px;line-height:21px}.widget .entry-content.form.config .first-label{margin-bottom:5px}.widget .entry-content.form.config .field-intro{margin-top:12px}.widget .entry-content.form.config #titel,.widget .entry-content.form.config #sleutel{font-size:15px;width:250px}.widget .entry-content.form.config #sleutel{margin-top:8px}.widget .entry-content.form.config .type label{font-size:13px;display:inline;font-weight:normal;margin-right:10px}.widget .entry-content.form.config .summary-column{display:inline;float:left;margin-left:5px;margin-right:5px;width:230px;margin-left:0}.widget .entry-content.form.config ul{padding:0px;margin:0px}.widget .entry-content.form.config ul.colors{*zoom:1}.widget .entry-content.form.config ul.colors li{list-style-type:none;margin-left:0px}.widget .entry-content.form.config ul.colors:before,.widget .entry-content.form.config ul.colors:after{display:table;content:""}.widget .entry-content.form.config ul.colors:after{clear:both}.widget .entry-content.form.config ul.colors li{margin-left:0;position:relative;float:left;width:145px}.widget .entry-content.form.config ul.colors li input{width:90px;color:#bbbbbb}.widget .entry-content.form.config ul.colors li b{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #cdcdcd;cursor:pointer;display:block;height:31px;width:31px;left:95px;position:absolute;top:22px}.widget .entry-content.form.config ul.colors li.shell b{background:#000}.widget .entry-content.form.config ul.colors li.header b{background:#fff}.widget .entry-content.form.config ul.colors li.link b{background:#ff4f00}.widget .entry-content.form.config ul.colors li.text b{background:#000}.widget .entry-content.form.config ul.num{*zoom:1}.widget .entry-content.form.config ul.num li{list-style-type:none;margin-left:0px}.widget .entry-content.form.config ul.num:before,.widget .entry-content.form.config ul.num:after{display:table;content:""}.widget .entry-content.form.config ul.num:after{clear:both}.widget .entry-content.form.config ul.num li{display:inline;float:left;line-height:20px;font-weight:bold;margin-right:20px}.widget .entry-content.form.config ul.num li a{text-decoration:none;border:0px}.widget .entry-content.form.config ul.num li a.selected{color:#ff4f00}.widget .entry-content.form.config textarea{width:99%;height:160px;font:13px / 1.5 Consolas, Inconsolata, Monaco, Courier, monospaced;padding:1px}.widget #preview{display:inline;float:left;margin-left:5px;margin-right:5px;width:150px;margin-top:29px}.widget-api-link{font-weight:bold}.widget-preview{display:inline;float:left;margin-left:5px;margin-right:5px;width:310px;float:right}.widget-preview .kl-agenda-widget{margin-top:6px}.colorpicker{width:287px;height:176px;overflow:hidden;position:absolute;background:url(//assets.kennislink.nl/assets/cp/background-6ddbd88ebf0706192693ead3a6f5da52.png);display:none}.colorpicker_color{width:150px;height:150px;left:11px;top:15px;position:absolute;background:red;overflow:hidden;cursor:crosshair}.colorpicker_color div{position:absolute;top:0;left:0;width:150px;height:150px;background:url(//assets.kennislink.nl/assets/cp/overlay-5c564991eaf6ad37ffbfbcb7c3b01d61.png)}.colorpicker_color div div{position:absolute;top:0;left:0;width:11px;height:11px;overflow:hidden;background:url(//assets.kennislink.nl/assets/cp/select-5ac95b0a991b40f3ebcd6f884c84a2e0.gif);margin:-5px 0 0 -5px}.colorpicker_hue{position:absolute;top:15px;left:168px;width:35px;height:150px;cursor:n-resize}.colorpicker_hue div{position:absolute;width:35px;height:9px;overflow:hidden;background:url(//assets.kennislink.nl/assets/cp/indic-8b29cd8666b31603a54d784b07dfb961.gif) left top;margin:-4px 0 0 0;left:0px}.colorpicker_new_color,.colorpicker_current_color,.colorpicker_rgb_r,.colorpicker_rgb_g,.colorpicker_rgb_b,.colorpicker_hsb_h,.colorpicker_hsb_s,.colorpicker_hsb_b,.colorpicker_submit{display:none}.colorpicker_hex{position:absolute;width:52px;height:22px;left:218px;top:15px}.colorpicker_focus{background-position:center}.farbtastic{position:relative;width:195px;height:195px}.farbtastic *{position:absolute;cursor:crosshair}.farbtastic .wheel{width:195px;height:195px}.farbtastic .color,.farbtastic .overlay{top:47px;left:47px;width:101px;height:101px}.farbtastic .wheel{background:url(//assets.kennislink.nl/cp/wheel.gif) no-repeat;width:195px;height:195px}.farbtastic .overlay{background:url(//assets.kennislink.nl/cp/mask.png) no-repeat}.farbtastic .marker{width:17px;height:17px;margin:-8px 0 0 -8px;overflow:hidden;background:url(//assets.kennislink.nl/cp/marker.png) no-repeat}.your-key{font-size:36px;color:#333333}.pull-right{float:right}.pull-left{float:left}.hide{display:none}.show{display:block}.invisible{visibility:hidden}a{color:#ff4f00;text-decoration:none}a:hover{text-decoration:underline}#editbarwrap{background-color:#17161c;background-image:-moz-linear-gradient(top, #1c1b21, #100f15);background-image:-ms-linear-gradient(top, #1c1b21, #100f15);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#1c1b21), to(#100f15));background-image:-webkit-linear-gradient(top, #1c1b21, #100f15);background-image:-o-linear-gradient(top, #1c1b21, #100f15);background-image:linear-gradient(top, #1c1b21, #100f15);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1b21', endColorstr='#100f15', GradientType=0),#1c1b21,#100f15;text-align:right}#editbarwrap .inner{border-bottom:1px solid #4b4b4c}#editbarwrap #editbar{padding:5px 20px 5px 0;padding-right:20px;font-size:13px;width:950px;margin:0 auto}#editbarwrap a{color:#e9e9ea;padding:0 10px}#editbarwrap a.logout{padding-right:0}#editbarwrap a:hover{color:#ff4f00;text-decoration:none}html.ie9 header.main form b{top:22px}html.ie9 header.main form input{padding-top:2px;padding-bottom:3px}html.ie9 header.main .subjects{margin-top:-3px}html.ie9 section#publications .meta b{position:absolute;top:7px}html.ie9 section#publications .meta input[type=text]{padding:2px 3px 6px 20px}html.ie8 section.scienceout header .so{text-align:right;width:200px}@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;margin-left:1cm;margin-right:1cm}a,a:visited{text-decoration:none}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}@page{margin:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}#editbarwrap,#editbar,header.main,section#fresh,section.social,footer.main,.ribbon{display:none !important}div.theme_header,section.read_more,section.also_visit,section.share,section.comments,.modal,aside{display:none !important}.activity .activities,.activity .header-nav-back{display:none}.activity #meta .dates-more,.activity #meta .dates-less{display:none}.activity .route{display:none}.activity #meta .logo{width:300px;height:auto}.activity aside{display:block !important}body.activity article.hentry header.publication h1{margin-top:25px}body.activity article.hentry header.publication{padding:0}footer.publication ul{display:none}footer.publication section.share{display:none}footer.publication div.copyright{border:none}div.feed_widget,div.twitter{display:none}body,#container,#main,#meta,div.body{float:none !important;width:auto !important;margin:0 !important;padding:0 !important}h1.entry-title{font-size:2em !important;line-height:1.5 !important}p.lead{font-size:11pt !important;margin-bottom:1.2em !important}.entry-content{font-size:10pt !important}.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:1em !important}}/*!
     *  Font Awesome 3.2.1
     *  the iconic font designed for Bootstrap
     *  ------------------------------------------------------------------------------
     *  The full suite of pictographic icons, examples, and documentation can be
     *  found at http://fontawesome.io.  Stay up to date on Twitter at
     *  http://twitter.com/fontawesome.
     *
     *  License
     *  ------------------------------------------------------------------------------
     *  - The Font Awesome font is licensed under SIL OFL 1.1 -
     *    http://scripts.sil.org/OFL
     *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
     *    http://opensource.org/licenses/mit-license.html
     *  - Font Awesome documentation licensed under CC BY 3.0 -
     *    http://creativecommons.org/licenses/by/3.0/
     *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
     *    "Font Awesome by Dave Gandy - http://fontawesome.io"
     *
     *  Author - Dave Gandy
     *  ------------------------------------------------------------------------------
     *  Email: dave@fontawesome.io
     *  Twitter: http://twitter.com/byscuits
     *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
     */

Examples and source code

icon-arrow-right

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

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

icon-arrow-right

icon-arrow-right

icon-arrow-right

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

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