mirror of
https://github.com/tabler/tabler.git
synced 2026-08-06 11:22:23 +04:00
Bartosz-Do
416ca63ca4
Co-authored-by: codecalm <codecalm@gmail.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cursor <cursoragent@cursor.com>
38 lines
1.2 KiB
Plaintext
38 lines
1.2 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
|
|
docs-libs: tabler-socials
|
|
description: Connect users to your social profiles.
|
|
layout: '@shared/layouts/DocsMdxLayout.astro'
|
|
---
|
|
|
|
import Example from '@shared/components/docs/Example.astro'
|
|
import Socials from '@shared/components/docs/Socials.astro'
|
|
import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
|
|
|
|
## 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:
|
|
|
|
<CdnImportPlugin plugins={['socials']} />
|
|
|
|
## Social icons
|
|
|
|
To create a social icon, add the `social` class to a component and provide the class `social-app-*` with the social app whose icon you want to use.
|
|
|
|
<Example>
|
|
|
|
<span class="social social-app-facebook"></span>
|
|
<span class="social social-app-x"></span>
|
|
<span class="social social-app-instagram"></span>
|
|
</Example>
|
|
|
|
## Social apps list
|
|
|
|
Here is a list of all available social apps:
|
|
|
|
<Socials />
|