Fontawesome 5 Icons
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
For more info visit Font Awesome's Home.
Base Examples
Fontawesome icons can be used as class="fa {class}".
<i class="fa fa-comment-alt"></i>
<i class="fa fa-envelope-open-text"></i>
<i class="fa fa-map-marker-alt"></i>
<i class="fa fa-search"></i>
<i class="fa fa-quote-right"></i>
<i class="fa fa-fill-drip"></i>
Color Options
Use .text-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25} class format to set different colors.
<i class="fa fa-comment-alt text-success mr-5"></i>
<i class="fa fa-envelope-open-text text-primary mr-5"></i>
<i class="fa fa-map-marker-alt text-danger mr-5"></i>
<i class="fa fa-search text-warning mr-5"></i>
<i class="fa fa-quote-right text-info mr-5"></i>
<i class="fa fa-fill-drip text-dark"></i>
Sizes
Use .icon-{size} class format to set different sizes.
<i class="fa fa-fill-drip icon-xs"></i>
<i class="fa fa-fill-drip icon-sm"></i>
<i class="fa fa-fill-drip icon-nm"></i>
<i class="fa fa-fill-drip icon-md"></i>
<i class="fa fa-fill-drip icon-lg"></i>
<i class="fa fa-fill-drip icon-xl"></i>
<i class="fa fa-fill-drip icon-2x"></i>
<i class="fa fa-fill-drip icon-3x"></i>
<i class="fa fa-fill-drip icon-4x"></i>
<i class="fa fa-fill-drip icon-5x"></i>
<i class="fa fa-fill-drip icon-6x"></i>
<i class="fa fa-fill-drip icon-7x"></i>
<i class="fa fa-fill-drip icon-8x"></i>
<i class="fa fa-fill-drip icon-9x"></i>
<i class="fa fa-fill-drip icon-10x"></i>
Integration
You can use Flaticons literally with any element within Metronic.
<a href="#" class="btn btn-success font-weight-bold mr-2">
<i class="fa fa-comment-alt"></i> Button example
</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">
<i class="fa fa-envelope-open-text"></i> Button example 2
</a>
<div class="dropdown dropdown-inline">
<a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-search"></i> Dropdown example
</a>
<div class="dropdown-menu dropdown-menu-md py-5">
<ul class="navi navi-hover">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-comment-alt text-danger"></i></span>
<span class="navi-text">Messages</span>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-cog text-warning"></i></span>
<span class="navi-text">Settings</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-poll text-success"></i></span>
<span class="navi-text">Tasks</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-fill-drip text-primary"></i></span>
<span class="navi-text">Orders</span>
</a>
</li>
</ul>
</div>
</div>
Warning: file_get_contents(/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo11/dist/../../tools/node_modules/@fortawesome/fontawesome-free/js/brands.js): Failed to open stream: No such file or directory in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php on line 385
Warning: file_get_contents(/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo11/dist/../../tools/node_modules/@fortawesome/fontawesome-free/js/regular.js): Failed to open stream: No such file or directory in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php on line 385
Warning: file_get_contents(/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo11/dist/../../tools/node_modules/@fortawesome/fontawesome-free/js/solid.js): Failed to open stream: No such file or directory in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php on line 385
Fatal error: Uncaught TypeError: array_chunk(): Argument #1 ($array) must be of type array, null given in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php:315 Stack trace: #0 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php(315): array_chunk() #1 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php(296): FontAwesome5Icons::render() #2 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php(289): FontAwesome5Icons::getCache() #3 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php(397): FontAwesome5Icons::init() #4 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #5 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(114): Util::getView() #6 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo11/dist/inc/view/demos/layout/layout.php(31): Page::getPageView() #7 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #8 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(88): Util::getView() #9 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/base/default.php(78): Page::getLayoutView() #10 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #11 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(83): Util::getView() #12 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(58): Page::getBaseView() #13 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/run.php(66): Page::run() #14 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo11/dist/index.php(19): include('...') #15 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/index.php(7): include('...') #16 {main} thrown in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/fontawesome5.php on line 315