Font Awesome icon usage statistics

  • 11 types of Font Awesome iconic font are used and found 43 times in total.
  • JOOMINA.IR used 3.9 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of JOOMINA.IR are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • JOOMINA.IR includes "http://www.JOOMINA.IR/templates/joomina_ir/css/template.css.php?b=&v=1" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'BCCNassim';src:url("../fonts/BCCNassim.eot?") format('eot'),url("../fonts/BCCNassim.woff") format('woff'),url("../fonts/BCCNassim.ttf") format('truetype')}@font-face{font-family:'BKoodakBold';src:url("../fonts/BRoya.eot?") format('eot'),url("../fonts/BRoya.woff") format('woff'),url("../fonts/BRoya.ttf") format('truetype')}.ye,.ge,.blu{font-family:'BKoodakBold';background-color:#F60;color:#FFF;padding:4px 20px;margin:5px 0;font-size:22px}.ge{background-color:#27ae60}.blu{background-color:#3498db}.blu a{font-size:22px;color:#fff}.blu:hover{background-color:#f39c12}.blu:hover a{color:#3498db}section.about{background:url(../images/aboutus_top.png) top right no-repeat;width:347px;height:312px;float:right;font-family:'BCCNassim';font-size:16px}section.about .module-m h3{color:#FFF;font-size:18px;font-weight:bold;margin-bottom:10px}section.about .module-m{width:327px;margin:0 auto;text-align:justify}section.about .module-m-m{width:95%;margin:0 auto}section.about .module-m{background:url(../images/aboutus_bot.png) bottom right no-repeat;height:312px}section.slideshow{width:640px;height:312px;overflow:hidden;float:left}.spacer2{width:100%;height:9px}.line{background:url(../images/line.jpg) repeat-x top right;width:100%;height:16px}section#forum{width:989px;height:169px;margin:0 auto;position:relative}#joomlaforum{width:423px;height:166px;float:right;overflow:hidden;background:url(../images/joomina.png) no-repeat top right}#forumrss{background:url(../images/forumrss.png)no-repeat top right;width:566px;height:167px;overflow:hidden;float:left}#forumrss h3{display:none}#forumrss .module-m{width:547px;height:135px;margin:0 auto;font-family:'BKoodakBold';font-size:14px;overflow:hidden;margin-top:17px}ul.newsfeed li a{color:#000;text-shadow:1px 1px 1px #ffffff;filter:dropshadow(color=#ffffff,offx=1,offy=1)}ul.newsfeed li{background-color:#dbdbdb;margin-bottom:2px;padding-right:10px}ul.newsfeed li:hover{background-color:#a200ff;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}ul.newsfeed li:hover a{color:#FFF;text-shadow:1px 1px 1px #600097;filter:dropshadow(color=#600097,offx=1,offy=1)}.jpr{height:220px;width:570px;float:right}.projecttemp{width:420px;float:left;height:220px;position:relative}section#jpr{width:100%;height:220px;position:relative}.pp{margin-top:15px}section#menu{background-color:#4089ac;width:100%;height:55px}.dj-main li a.dj-up_a{height:55px !important;font-family:'BKoodakBold' !important;font-size:16px !important;border-left:1px solid #a0c4d6 !important;background-image:none !important}.dj-main li a.dj-up_a span.dj-drop,a.dj-up_a > span{line-height:55px !important}.dj-main li:hover{background-color:#8cbf26 !important;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}h2.acc_trigger.first{padding:0;margin:0 0 0 0;background:url(../images/tiger1.png) no-repeat top;height:61px;line-height:61px;width:755px;font-size:2em;font-weight:normal;float:left;background-position:top right;background-repeat:no-repeat;background-color:#FFF}h2.acc_trigger.secound{padding:0;margin:0 0 0 0;background:url(../images/tiger2.png) no-repeat right bottom;height:61px;line-height:61px;width:755px;font-size:2em;font-weight:normal;float:left;background-position:top right;background-repeat:no-repeat;background-color:#FFF}h2.acc_trigger a{color:#fff;text-decoration:none;display:block}h2.acc_trigger a:hover{color:#ccc}h2.acc_trigger.first.active{background-position:right top}.acc_container{margin:0 0 5px;padding:0;overflow:hidden;font-size:1.2em;width:694px;clear:both;background:#FFF;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;float:left}.acc_container .block{padding:10px}#countainer{width:100%;position:relative}section#content{width:755px;float:left}aside#right{width:230px;float:right;color:#FFF}#right .module_blue #mod_module{background-color:#66bbfc}#right .module-m-m{width:210px;margin:0 auto;padding:5px}#right .module_blue .module-m-m{background-color:#5ca8e2;margin-bottom:10px !important;display:block}#right .module_viber .module-m-m{background-color:#FFF;margin-bottom:10px !important;display:block;margin:0 auto}#right .module_blue .module-m h3,#right .module_green .module-m h3,#right .module_purpel .module-m h3,#right .module_orange .module-m h3{font-family:'BCCNassim';padding:17px 10px;padding-left:0;font-size:22px;margin-right:10px;padding-right:26px}#right .module_viber .module-m h3{font-family:'BCCNassim';padding:17px 10px;padding-left:0;font-size:22px;padding-right:10px}#right .module-m{padding-bottom:5px;margin-bottom:10px}#right .module_blue .module-m h3{background-image:url(../images/blu.png);background-position:right center;background-repeat:no-repeat}#right .module_viber .module-m h3{background-color:#7c529e;color:#FFF}#right .module_viber #mod_module{background-color:#FFF}#right .module_green #mod_module{background-color:#0ca389}#right .module_green .module-m h3{background-image:url(../images/green.png);background-position:right center;background-repeat:no-repeat;padding-right:28px}#right .module_green .module-m-m{margin-bottom:10px !important;display:block}#right a{color:#FFF}#right .module_greenlight a{color:#066 !important}.kmt-mod .mod-comment-text,.kmt-mod .mod-comment-text .mod-comment-page{font-family:tahoma !important;font-style:normal !important;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}.kmt-mod .mod-comment-text:hover{background-color:#FFF !important;color:#333 !important}#right .module_purpel #mod_module{background-color:#de577b}#right .module_purpel .module-m h3{background-image:url(../images/search.png);background-position:right center;background-repeat:no-repeat;padding-right:28px}#right .module_purpel .module-m-m{margin-bottom:10px !important;display:block}div.k2TagCloudBlock a{float:right;font-family:'BKoodakBold' !important;font-size:18px;-webkit-transition:all 0.4s ease-in;background-color:#c74e6e;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;margin:3px !important;font-size:16px !important}div.k2TagCloudBlock{font-size:14px}div.k2TagCloudBlock a:hover{float:right;background-color:#FFF;color:#333 !important}#right .module_orange #mod_module{background-color:#f37b53}#right .module_orange .module-m h3{background-image:url(../images/orange.png);background-position:right center;background-repeat:no-repeat;padding-right:28px}#right .module_orange .module-m-m{margin-bottom:10px !important;display:block}#right .module_orange ul li{background-color:#da6e4b;margin:5px 0;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}#right .module_orange ul li:hover{background-color:#FFF;color:#333}#right .module_orange ul li:hover a{color:#333}#right .module{background-color:#FFF}#right .module #mod_module .module-container-m .module-m h3{font-family:'BCCNassim';padding:17px 10px;background-color:#4089ac;font-size:22px;border-right:#FFF 1px solid;background-image:url(../images/joomla.png);background-position:center right;background-repeat:no-repeat;padding-right:38px;color:#FFF}#right .module-m h3{margin-bottom:10px}#right .module #mod_module .module-container-m .module-m a{color:#FFF}#right .module #mod_module .module-container-m .module-m{color:#333}#right .module #mod_module .module-container-m .module-m a:hover{color:#066}#right .module #mod_module .module-container-m .module-m ul li{padding:4px;margin:2px 0;background-color:#66bbfc;;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;font-size:12px}#right .module #mod_module .module-container-m .module-m ul li:hover{background-color:#5ca8e2}#right .module_orangelight #mod_module .module-m{background-color:#FFF}#right .module_orangelight #mod_module .module-container-m .module-m ul li:hover a{color:#FFF}#right .module_orangelight #mod_module .module-container-m .module-m h3{font-family:'BCCNassim';padding:17px 10px;background-color:#f37b53;font-size:22px;border-right:#FFF 1px solid;background-image:url(../images/orange.png);background-position:195px 15px;background-repeat:no-repeat;padding-right:38px;color:#FFF}#right .module_orangelight #mod_module .module-container-m .module-m a{color:#FFF}#right .module_orangelight #mod_module .module-container-m .module-m{color:#333}#right .module_orangelight #mod_module .module-container-m .module-m a:hover{color:#066}#right .module_orangelight #mod_module .module-container-m .module-m ul li{padding:4px;margin:2px 0;background-color:#f37b53;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;font-size:12px}#right .module_orangelight #mod_module .module-container-m .module-m ul li:hover{background-color:#da6e4b}#right .module_orangelight #mod_module .module-container-m .module-m ul li:hover a{color:#FFF}#right .module_greenlight #mod_module .module-m{background-color:#FFF}#right .module_greenlight #mod_module .module-container-m .module-m ul li:hover a{color:#FFF}#right .module_greenlight #mod_module .module-container-m .module-m h3{font-family:'BCCNassim';padding:17px 10px;background-color:#0ca389;font-size:22px;border-right:#FFF 1px solid;background-image:url(../images/green.png);background-position:198px 17px;background-repeat:no-repeat;padding-right:38px;color:#FFF}#right .module_greenlight #mod_module .module-container-m .module-m a{color:#FFF}#right .module_greenlight #mod_module .module-container-m .module-m{color:#333}#right .module_greenlight #mod_module .module-container-m .module-m a:hover{color:#066}#right .module_greenlight #mod_module .module-container-m .module-m ul li{padding:4px;margin:2px 0;background-color:#0ca389;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;font-size:12px}#right .module_greenlight #mod_module .module-container-m .module-m ul li:hover{background-color:#0b927b}#right .module_greenlight #mod_module .module-container-m .module-m ul li:hover a{color:#FFF}.binside{width:965px;margin:0 auto;padding:20px 0}.bottom{background:url(../images/b.png) repeat-x top right #525252;color:#FFF}.bottom h3{font-family:'BKoodakBold';padding:0 10px;color:#9aa1a8;font-size:24px;border-right:#FFF 2px solid;margin-bottom:15px;font-weight:bold}.bottom h3 span.ti1{color:#FFF}.bottom a{color:#CCC}.b1{text-align:justify;width:225px;float:right;margin-left:21px}.b2{text-align:justify;width:225px;float:left}.footer{background-image:url(../images/footer.png);background-position:top right;background-repeat:no-repeat;height:41px;width:900px;line-height:41px;padding-right:61px}#backtotop{float:left;font-size:40px}#backtotop a{color:#333}#backtotop a:hover{color:#16a5d7}#login{background-image:url(../images/login.png);width:67px;height:67px;background-position:top right;background-repeat:no-repeat;font-size:10px;padding-top:10px;padding-right:2px}.xa-modal-alert{padding:0 20px;font-family:'BCCNassim';font-size:18px}.dj-main li ul.dj-submenu{top:55px !important}#fixeds{position:fixed;top:100px;left:0;font-size:12px;font-family:tahoma;line-height:25px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}.fixholder,.fixholder li span{font-size:12px !important;font-family:tahoma;line-height:25px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}.fixholder li{margin:2px 0;font-size:20px;padding:5px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;text-align:right;height:25px;overflow:hidden}.fixholder span{display:none;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}.fixholder:hover span{display:inline-block}.fixholder:hover{resize:vertical;overflow:auto;min-width:110px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}.fixholder li.home:hover,.fixholder li.googles:hover,.fixholder li.forum:hover,.fixholder li.market:hover,.fixholder li.contacti:hover{background-color:#FFF}.fixholder li:hover a,.fixholder li.home:hover a,.fixholder li.googles:hover a,.fixholder li.forum:hover a,.fixholder li.market:hover a,.fixholder li.contacti:hover a{color:#000}.fixholder li.home{background-color:#00aba9;color:#FFF}.fixholder li.home a{color:#FFF}.fixholder li.googles{background-color:#e51400}.fixholder li.googles a,.fixholder li.forum a,.fixholder li.market a,.fixholder li.conracti a{color:#FFF}.fixholder li.forum{background-color:#1e90ff}.fixholder li.market{background-color:#a200ff}.fixholder li.contacti{background-color:#090 !important}.fixholder li.contacti a{color:#FFF}.fixholder li.contacti:hover{background-color:#FFF !important}.dj-main li a.dj-up_a span.dj-drop{padding:0 !important}#forumrss h4,#forumrss a{font-size:18px !important}pre{background-color:#ebebeb;padding:8px 0;border-left:4px #1ba1e2 solid;padding-left:14px;color:#333;text-align:left;direction:ltr}div.itemAttachmentsBlock{background-color:#a200ff;color:#FFF;padding:10px 5px;font-size:18px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}div.itemAttachmentsBlock a,div.itemAttachmentsBlock span{color:#FFF !important;;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}div.itemAttachmentsBlock span{background-image:url(../images/cd.png);background-position:top right;background-repeat:no-repeat;padding-right:35px}div.itemAttachmentsBlock:hover{background-color:#f37b53;color:#FFF}div.itemAttachmentsBlock:hover a{color:#FF0}#contactuspage{position:relative;margin:0 auto;width:500px;height:321px}#contactuspage img{-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}#contactuspage img:hover{-moz-transform:scale(1.1) rotate(1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-webkit-transform:scale(1.1) rotate(1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-o-transform:scale(1.1) rotate(1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-ms-transform:scale(1.1) rotate(1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);transform:scale(1.1) rotate(1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}#contactus-joomina-01{position:absolute;left:0px;top:0px;width:500px;height:4px}#contactus-joomina-02{position:absolute;left:0px;top:4px;width:5px;height:317px}#contactus-joomina-03{position:absolute;left:5px;top:4px;width:242px;height:101px;overflow:hidden}#contactus-joomina-04{position:absolute;left:247px;top:4px;width:7px;height:222px}#contactus-joomina-05{position:absolute;left:254px;top:4px;width:118px;height:101px;overflow:hidden}#contactus-joomina-06{position:absolute;left:372px;top:4px;width:7px;height:110px}#contactus-joomina-07{position:absolute;left:379px;top:4px;width:117px;height:101px;overflow:hidden}#contactus-joomina-08{position:absolute;left:496px;top:4px;width:4px;height:317px}#contactus-joomina-09{position:absolute;left:5px;top:105px;width:242px;height:9px}#contactus-joomina-10{position:absolute;left:254px;top:105px;width:118px;height:9px}#contactus-joomina-11{position:absolute;left:379px;top:105px;width:117px;height:9px}#contactus-joomina-12{position:absolute;left:5px;top:114px;width:242px;height:103px;overflow:hidden}#contactus-joomina-13{position:absolute;left:254px;top:114px;width:242px;height:103px;overflow:hidden}#contactus-joomina-14{position:absolute;left:5px;top:217px;width:242px;height:9px}#contactus-joomina-15{position:absolute;left:254px;top:217px;width:242px;height:9px;overflow:hidden}#contactus-joomina-16{position:absolute;left:5px;top:226px;width:491px;height:90px;overflow:hidden}#contactus-joomina-17{position:absolute;left:5px;top:316px;width:491px;height:5px;overflow:hidden}.jd_footer{display:none}.tp-caption,.tp-caption.big_white,.tp-caption.large_text{font-family:'BCCNassim' !important;font-size:36px !important}#j-dlljoomina{background-color:#cfcfcf;margin:15px 15px;padding:10px 10px;border:1px solid #c69c6d;-webkit-box-shadow:0px 0px 1px 1px #c69c6d;box-shadow:0px 0px 1px 1px #c69c6d;-webkit-border-radius:5px;border-radius:5px}#j-des{background-color:#fff;margin:15px 15px;padding:5px 5px;color:#873434;text-align:center;line-height:25px;border-radius:5px}#j-des:hover{background-color:#c9c9c9;color:#000}#j-des-b{height:5px}#bu-dll{background-color:#1b9b1e;width:80%;height:20px;padding:5px 5px;margin:10px auto;text-align:center;border:1px solid #437d20;-webkit-box-shadow:0px 0px 1px 1px #437d20;border-radius:5px}#bu-dll:hover{background-color:#1f5da3;color:#fff}#bu-dll a:hover{}#bu-dll a{color:#fff}.rsform-block{border:1px solid #ccc;margin:5px 0;padding:0 3px;border-radius:10px}.componentheading{font-family:"BKoodakBold";font-size:22px;font-weight:bold;text-align:center}#j3-dlljoomina{background-color:#cfcfcf;margin:15px 15px;padding:10px 10px;border:1px solid #c69c6d;-webkit-box-shadow:0px 0px 1px 1px #c69c6d;box-shadow:0px 0px 1px 1px #c69c6d;-webkit-border-radius:5px;border-radius:5px;direction:rtl;text-shadow:none}#j3-des{background-color:#16a085;margin:15px 15px;padding:5px 5px;color:#fff;text-align:center;line-height:25px;border-radius:5px}#j3-des:hover{background-color:#7f8c8d;color:#fff}#j3-des2{background-color:#bdc3c7;margin:15px 15px;padding:5px 5px;color:#2c3e50;text-align:justify;line-height:25px;border-radius:5px}#j3-des2:hover{background-color:#ecf0f1;color:#fff}#j3-des-b{height:5px}#bu3-dll{background-color:#3498db;width:80%;height:20px;padding:5px 5px;margin:10px auto;text-align:center;border:1px solid #437d20;-webkit-box-shadow:0px 0px 1px 1px #437d20;border-radius:5px}#bu3-dll:hover{background-color:#1f5da3;color:#fff}#bu3-dll a:hover{}#bu3-dll a{color:#fff}@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:normal;font-style:normal}

Examples and source code

icon-comments-alt

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

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

icon-comments-alt

icon-comments-alt

icon-comments-alt

icon-comments-alt

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

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

<i class=" icon-comments-alt icon-2x icon-spin"></i>
<i class=" icon-comments-alt icon-3x icon-spin"></i>
<i class=" icon-comments-alt icon-4x icon-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

icon-comments-alt on icon-check-empty
icon-comments-alt on icon-circle
icon-comments-altl on icon-sign-blank
icon-ban-circle on icon-comments-alt

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