Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

Base Examples

Line Awesome 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="la la-tint icon-xs"></i>
                        <i class="la la-tint icon-sm"></i>
                        <i class="la la-tint icon-nm"></i>
                        <i class="la la-tint icon-md"></i>
                        <i class="la la-tint icon-lg"></i>
                        <i class="la la-tint icon-xl"></i>
                        <i class="la la-tint icon-2x"></i>
                        <i class="la la-tint icon-3x"></i>
                        <i class="la la-tint icon-4x"></i>
                        <i class="la la-tint icon-5x"></i>
                        <i class="la la-tint icon-6x"></i>
                        <i class="la la-tint icon-7x"></i>
                        <i class="la la-tint icon-8x"></i>
                        <i class="la la-tint icon-9x"></i>
                        <i class="la la-tint 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="la la-cog"></i> Button example
                        </a>

                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">
                            <i class="la la-cloud-upload-alt"></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="la la-envelope-open"></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="la la-cloud-download-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="la la-map-marker 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="la la-palette 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="la la-sellsy 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/demo3/dist/../../tools/node_modules/line-awesome/dist/line-awesome/css/line-awesome.css): 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/lineawesome.php on line 368

Warning: file_get_contents(/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo3/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/lineawesome.php on line 373

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/lineawesome.php:308 Stack trace: #0 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/lineawesome.php(308): array_chunk() #1 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/lineawesome.php(289): LineAwesomeIcons::render() #2 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/lineawesome.php(282): LineAwesomeIcons::getCache() #3 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/lineawesome.php(392): LineAwesomeIcons::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/demo3/dist/inc/view/demos/layout/content.php(8): 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(92): Util::getView() #9 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo3/dist/inc/view/demos/layout/layout.php(20): Page::getLayoutPartialView() #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(88): Util::getView() #12 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/base/default.php(78): Page::getLayoutView() #13 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #14 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(83): Util::getView() #15 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(58): Page::getBaseView() #16 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/run.php(66): Page::run() #17 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo3/dist/index.php(19): include('...') #18 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/index.php(7): include('...') #19 {main} thrown in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/lineawesome.php on line 308