Font Awesome icon usage statistics

  • 1 types of Font Awesome iconic font are used and found 5 times in total.
  • LEXUS.CO.TH used 5.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of LEXUS.CO.TH are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • LEXUS.CO.TH includes "http://static.lexusasia.com/designs/lexus/clientlibs.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'NobelLightRegular';src:url('clientlibs/css/fonts/nlight-webfont.eot');src:url('clientlibs/css/fonts/nlight-webfont.eot?#iefix') format('embedded-opentype'),url('clientlibs/css/fonts/nlight-webfont.woff') format('woff'),url('clientlibs/css/fonts/nlight-webfont.ttf') format('truetype'),url('clientlibs/css/fonts/nlight-webfont.#NobelLightRegular') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'NobelRegular';src:url('clientlibs/css/fonts/nregular-webfont.eot');src:url('clientlibs/css/fonts/nregular-webfont.eot?#iefix') format('embedded-opentype'),url('clientlibs/css/fonts/nregular-webfont.woff') format('woff'),url('clientlibs/css/fonts/nregular-webfont.ttf') format('truetype'),url('clientlibs/css/fonts/nregular-webfont.#NobelRegular') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'NobelBoldRegular';src:url('clientlibs/css/fonts/nbold-webfont.eot');src:url('clientlibs/css/fonts/nbold-webfont.eot?#iefix') format('embedded-opentype'),url('clientlibs/css/fonts/nbold-webfont.woff') format('woff'),url('clientlibs/css/fonts/nbold-webfont.ttf') format('truetype'),url('clientlibs/css/fonts/nbold-webfont.#NobelBoldRegular') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'NobelBook';src:url('clientlibs/css/fonts/nbook-webfont.eot');src:url('clientlibs/css/fonts/nbook-webfont.eot?#iefix') format('embedded-opentype'),url('clientlibs/css/fonts/nbook-webfont.woff') format('woff'),url('clientlibs/css/fonts/nbook-webfont.ttf') format('truetype'),url('clientlibs/css/fonts/nbook-webfont.#NobelBoldRegular') format('svg');font-weight:300;font-style:normal}html{font-family:'NobelBook';font-size:62.5%}body{font-size:19px;font-size:1.9rem}.nav-sec{font-size:16px;font-size:1.6rem;letter-spacing:.01em}.nav-main li a{font-family:'NobelBoldRegular';font-size:16px;font-size:1.6rem;letter-spacing:.08em;text-transform:uppercase}.nav-drop-v1 .wrapper h3{font-family:'NobelRegular';font-size:36px;font-size:3.2rem;letter-spacing:0;line-height:40px}.nav-main .tagline{font-size:24px;font-size:2.4rem;line-height:1.2}.nav-drop-v1 .wrapper h4{font-size:16px;font-size:1.6rem}.nav-drop-v1.current h3{letter-spacing:.05em}.nav-drop-v1,.nav-drop-v1-d,.nav-drop-v2{font-size:16px;font-size:1.8rem}.nav-drop-v1-d .model h3,.nav-drop-v2 .model h3{font-family:'NobelRegular';font-size:24px;font-size:2.2rem;letter-spacing:-.02em;line-height:.85}.nav-drop-v1-d a,.nav-drop-v2 a{font-family:inherit !important;text-transform:none !important}.nav-drop-v2 .link-logo{line-height:1.2;text-transform:none}.nav-car-model{font-size:24px;font-size:2.4rem}.nav-inside-menu ul li a{font-family:'NobelBook';font-size:14px;font-size:1.4rem;font-weight:bold;text-transform:uppercase}.x-form-textarea{min-height:100px !important}h1,h2,h3,h4,h6{font-family:'NobelBook';}h1{font-size:48px;font-size:4.8rem}h2{font-size:36px;font-size:3.6rem;letter-spacing:.15em;text-transform:uppercase}h3{font-size:30px;font-size:3rem;font-weight:normal}h4{font-size:22px;font-size:2.2rem;font-weight:bold}h5{font-family:'NobelBook';font-weight:bold;text-transform:uppercase}h6{font-size:12px;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase}h1,h2{line-height:1.1}h3,h4,h5,h6{line-height:1.2}p,article ul,article ol{font-family:'NobelBook';line-height:1.3}small{font-size:85%}.font-normal{font-weight:normal !important}.btn-primary,.btn-secondary,.btn-view-gallery,.btn-big{font-family:'NobelBoldRegular';text-transform:uppercase}.btn-primary,.btn-secondary,.btn-view-gallery{font-size:14px}.btn-big{font-size:16px}.btn-primary i,.btn-secondary i,.btn-view-gallery i{font-style:normal}.link-back:before{font-size:150%}section header h2 > p,article h3 > p,p.lead{font-size:22px;font-size:2.2rem}p.lead strong{font-family:'NobelBoldRegular';font-weight:normal}.content-banner h2{letter-spacing:.05em;text-transform:none}.content-banner h3{letter-spacing:.05em}.content-banner p,.content-banner ul,.content-banner ol,.divgrow-showmore{font-size:16px;font-size:1.6rem}.news-filter{font-size:20px;font-size:2rem;line-height:1.4;text-transform:uppercase}.news-filter input[type="radio"]:checked ~ span{font-family:'NobelBoldRegular'}.news-grid h3{letter-spacing:.04em;line-height:1.2;text-transform:uppercase}.news-grid h3 strong{font-family:'NobelBoldRegular';font-weight:normal}.news-grid h4{font-size:24px;font-size:2.4rem;font-weight:normal}.news-grid p{font-size:16px;font-size:1.6rem;letter-spacing:.01em}.news-grid .youtube-view{font-size:13px;font-size:1.32rem}.label-wrapper{font-family:'NobelRegular';font-size:14px;font-size:1.4rem;text-transform:uppercase}.label-wrapper .category{letter-spacing:.02em}.slider-home-details h3{font-family:'NobelRegular';font-size:52px;font-size:6rem;letter-spacing:0;line-height:1;text-transform:uppercase}.slider-home-details p{font-family:'NobelBook';font-size:24px;font-size:3rem;line-height:1.2}.slider-details h3{font-family:'NobelBoldRegular';font-size:35px;font-size:3.5rem;font-weight:normal;letter-spacing:-.02em;line-height:1;text-transform:uppercase}.slider-details p{font-size:19px;font-size:1.9rem;line-height:1.2}.carousel .slides li span{font-family:'NobelBoldRegular';font-size:16px;font-size:1.6rem}.masthead-model{font-family:'NobelBoldRegular';font-size:24px;font-size:2.4rem;letter-spacing:.1em}.masthead-tagline{font-family:'NobelBoldRegular';font-size:52px;font-size:6rem;letter-spacing:-.01em;text-transform:uppercase}.chrome .masthead-tagline{letter-spacing:-.02em}#head-banner h1{font-family:'NobelBoldRegular';font-size:60px;font-size:6rem;font-weight:normal;line-height:.75;text-transform:uppercase}.accordion h5{font-size:19px;font-size:1.9rem;text-transform:none}.tabs > ul > li > a{font-weight:bold}.table-specs{line-height:1.2}.table-specs strong{font-family:'NobelRegular'}.table-compare{font-size:16px;font-size:1.6rem;line-height:1.2}.table-compare td:first-child{font-family:'NobelRegular';font-weight:bold;letter-spacing:.05em;text-transform:uppercase}.result-fit-my-budgets .table-compare{font-size:18px;font-size:1.8rem;line-height:1.6}.result-fit-my-budgets .table-compare h3{font-family:'NobelRegular';font-size:36px;font-size:3.6rem;letter-spacing:0;line-height:.7em}.result-fit-my-budgets .table-compare h4{font-family:'NobelRegular';font-size:16px;font-size:1.6rem;letter-spacing:.02em}.table-pricing{font-size:15.5px;font-size:1.55rem;line-height:1.2}.table-pricing th{font-size:17px;font-size:1.7rem;font-weight:bold}.table-pricing td:first-child{font-weight:bold}.form dl{line-height:1.2}.form dl dt{font-weight:bold}.form label .cell{font-size:17px;font-size:1.7rem;line-height:1.3}.form .box h2{font-size:20px;font-size:2rem}.form .box h2 span{font-size:30px;font-size:3rem}.form .box h3{font-size:16px;font-size:1.6rem;font-weight:normal;letter-spacing:.02em}.form .contact-us-det strong{font-size:25px;font-size:2.5rem;letter-spacing:.05em}.form-bottom{font-size:16px;font-size:1.6rem}.form .error-msg,#web-feedback .error-msg{font-weight:bold;line-height:1.1}.ui-datepicker-header,.ui-datepicker-calendar th{font-size:14px;font-size:1.4rem}.ui-datepicker-title{font-family:'NobelBoldRegular';letter-spacing:.05em;text-transform:uppercase}.ui-datepicker-prev,.ui-datepicker-next{font-family:'NobelRegular'}.ui-datepicker-calendar th{font-weight:normal}.ui-datepicker-calendar td{font-size:13px;font-size:1.3rem}.sbHolder-small{font-size:12px;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase}.sbOptions{font-size:16px;font-size:1.6rem}.intro-quote blockquote{font-size:24px;font-size:2.4rem;line-height:1.2}.intro-quote cite{font-style:normal;text-transform:uppercase}.intro-quote cite strong{font-size:36px;font-size:3.6rem;line-height:1.2;font-weight:normal}.intro-quote cite p{font-size:18px;font-size:1.8rem;line-height:1}.compare-header li h3{font-family:'NobelRegular';letter-spacing:0;line-height:1}.compare-header li p{font-size:19px;font-size:1.9rem}.social-share span{font-family:'NobelBoldRegular';font-size:15px;font-size:1.5rem;text-transform:uppercase}.performance-specs .specs dl dt{font-family:'NobelBoldRegular';font-size:140px;font-size:14rem;letter-spacing:-.02em}.performance-specs .specs dl dd{font-family:'NobelBoldRegular';font-size:20px;font-size:2rem;letter-spacing:.05em}.pricing-specs .header-wrapper .header{font-family:'NobelBoldRegular';font-size:72px;font-size:7.2rem;line-height:.8;}.pricing-specs .pricing-wrapper .pricing{font-size:24px;font-size:2.4rem;line-height:1.1}.pricing-specs .pricing-wrapper .pricing strong{font-family:'NobelRegular'}.tooltip-content,.tooltip-black{font-size:14px;font-size:1.4rem}.color-picker ul li .color-name{font-size:12px;font-size:1.2rem;font-weight:bold;letter-spacing:.03em;line-height:1.1;text-transform:uppercase}.promotion h2{font-size:24px;font-size:2.4rem;font-family:'NobelRegular';letter-spacing:0;line-height:1}.dealer-locator .location{font-size:16px;font-size:1.6rem}.dealer-locator h4{font-size:20px;font-size:2rem}.dealer-locator h5{font-size:14px;font-size:1.4rem;letter-spacing:.05em}.dealer-locator .location li:before,.dealer-locator-filter li:before,.map-marker:before{font-size:12px;font-size:1.2rem;font-weight:bold}.map-info,.map-info dl.business-hours,.map-info p{font-size:15px;font-size:1.5rem;line-height:1.1}.map-info .icon-remove:before{font-family:Arial,san-serif;font-size:17px;font-size:1.7rem;content:"X"}.dealer-locator-filter{font-size:14px;font-size:1.4rem}.dealer-locator .number{font-size:12px;font-size:1.2rem;font-weight:bold}.dealer-locator .location .tel{font-weight:bold}.dealer-locator .location .small,.dealer-locator .location dl{font-size:14px;font-size:1.4rem}.map-info a.cta span{font-family:'NobelBoldRegular' !important;font-size:14px !important;font-size:1.4rem !important;text-transform:uppercase}.footer-links{font-size:14px;font-size:1.4rem}.footer-links ul li a{font-family:'NobelRegular'}.footer-bottom{font-family:'NobelRegular';font-size:12px;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase}.footer-bottom .country{font-size:11px;font-size:1.1rem}.footer-mobile{font-size:17px;font-size:1.7rem}.ur-next-move h4{font-family:'NobelRegular'}.ur-next-move p{font-size:21px;font-size:2.1rem}.ur-next-move .small{font-size:12px;font-size:1.2rem}.ur-next-move-main .header span{font-family:'NobelBoldRegular';font-size:42px;font-size:4.2rem;text-transform:uppercase}.btn-blue,.btn-black{font-family:'NobelBoldRegular';text-transform:uppercase}.btn-blue{font-size:21px;font-size:2.1rem}.btn-black{font-size:14px;font-size:1.4rem}@font-face{font-family:'FontAwesome';src:url('clientlibs/css/fonts/fontawesome-webfont.eot?v=3.2.1');src:url('clientlibs/css/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('clientlibs/css/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('clientlibs/css/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('clientlibs/css/fonts/fontawesome-webfont.#fontawesomeregular?v=3.2.1') 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