Socicons
Socicon is a social icons font with more than 170 icons from all major services. Socicon is free and easy to use.
For more info please visit Socicon's Home.
Base Examples
Socicon
icons can be used as through class names as shown below.
<i class="socicon-vimeo mr-5"></i>
<i class="socicon-telegram mr-5"></i>
<i class="socicon-facebook mr-5"></i>
<i class="socicon-android mr-5"></i>
<i class="socicon-amazon mr-5"></i>
<i class="socicon-google"></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="socicon-vimeo text-success mr-5"></i>
<i class="socicon-telegram text-primary mr-5"></i>
<i class="socicon-facebook text-danger mr-5"></i>
<i class="socicon-android text-warning mr-5"></i>
<i class="socicon-amazon text-info mr-5"></i>
<i class="socicon-google text-dark"></i>
Sizes
Use .icon-{size}
class format to set different sizes.
<i class="socicon-android icon-xs"></i>
<i class="socicon-android icon-sm"></i>
<i class="socicon-android icon-nm"></i>
<i class="socicon-android icon-md"></i>
<i class="socicon-android icon-lg"></i>
<i class="socicon-android icon-xl"></i>
<i class="socicon-android icon-2x"></i>
<i class="socicon-android icon-3x"></i>
<i class="socicon-android icon-4x"></i>
<i class="socicon-android icon-5x"></i>
<i class="socicon-android icon-6x"></i>
<i class="socicon-android icon-7x"></i>
<i class="socicon-android icon-8x"></i>
<i class="socicon-android icon-9x"></i>
<i class="socicon-android 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="socicon-foursquare"></i> Button example
</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">
<i class="socicon-skype"></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="socicon-airbnb"></i> Dropdown example
</a>
<div class="dropdown-menu dropdown-menu-md py-5" style="">
<ul class="navi navi-hover">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="socicon-chrome 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="socicon-dribbble 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="socicon-apple 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="socicon-envato 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/demo8/dist/../../tools/node_modules/socicon/css/socicon.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/socicons.php on line 370
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/socicons.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/socicons.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/socicons.php(289): SociconsIcons::render() #2 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php(282): SociconsIcons::getCache() #3 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php(383): SociconsIcons::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/demo8/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/demo8/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/socicons.php on line 308