mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 09:24:24 +04:00
136 lines
2.3 KiB
Plaintext
136 lines
2.3 KiB
Plaintext
---
|
|
title: Social Icons
|
|
summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
|
|
plugin: socials
|
|
libs: tabler-socials
|
|
description: Connect users to your social profiles.
|
|
---
|
|
|
|
## Installation
|
|
|
|
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file in your page.
|
|
|
|
You can also include the plugin via CDN:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-socials.min.css" />
|
|
```
|
|
|
|
## Social icons
|
|
|
|
To create a social icon, add the `social` class to a component and also add the class for the specific social app whose icon you want to use.
|
|
|
|
```html example centered separated plugins="socials"
|
|
<span class="social social-app-facebook"></span>
|
|
<span class="social social-app-x"></span>
|
|
<span class="social social-app-instagram"></span>
|
|
```
|
|
|
|
## Social apps list
|
|
|
|
Here is a list of all available social apps:
|
|
|
|
<SocialsTable apps={[
|
|
{
|
|
"name": "Apple",
|
|
"file": "apple"
|
|
},
|
|
{
|
|
"name": "Discord",
|
|
"file": "discord"
|
|
},
|
|
{
|
|
"name": "Dribbble",
|
|
"file": "dribbble"
|
|
},
|
|
{
|
|
"name": "Facebook",
|
|
"file": "facebook"
|
|
},
|
|
{
|
|
"name": "Figma",
|
|
"file": "figma"
|
|
},
|
|
{
|
|
"name": "GitHub",
|
|
"file": "github"
|
|
},
|
|
{
|
|
"name": "Google",
|
|
"file": "google"
|
|
},
|
|
{
|
|
"name": "Instagram",
|
|
"file": "instagram"
|
|
},
|
|
{
|
|
"name": "LinkedIn",
|
|
"file": "linkedin"
|
|
},
|
|
{
|
|
"name": "Medium",
|
|
"file": "medium"
|
|
},
|
|
{
|
|
"name": "Meta",
|
|
"file": "meta"
|
|
},
|
|
{
|
|
"name": "MetaMask",
|
|
"file": "metamask"
|
|
},
|
|
{
|
|
"name": "Pinterest",
|
|
"file": "pinterest"
|
|
},
|
|
{
|
|
"name": "Reddit",
|
|
"file": "reddit"
|
|
},
|
|
{
|
|
"name": "Signal",
|
|
"file": "signal"
|
|
},
|
|
{
|
|
"name": "Skype",
|
|
"file": "skype"
|
|
},
|
|
{
|
|
"name": "Snapchat",
|
|
"file": "snapchat"
|
|
},
|
|
{
|
|
"name": "Spotify",
|
|
"file": "spotify"
|
|
},
|
|
{
|
|
"name": "Telegram",
|
|
"file": "telegram"
|
|
},
|
|
{
|
|
"name": "TikTok",
|
|
"file": "tiktok"
|
|
},
|
|
{
|
|
"name": "Tumblr",
|
|
"file": "tumblr"
|
|
},
|
|
{
|
|
"name": "Twitch",
|
|
"file": "twitch"
|
|
},
|
|
{
|
|
"name": "VK",
|
|
"file": "vk"
|
|
},
|
|
{
|
|
"name": "X (Twitter)",
|
|
"file": "x"
|
|
},
|
|
{
|
|
"name": "YouTube",
|
|
"file": "youtube"
|
|
}
|
|
]} />
|
|
|