mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
89 lines
3.5 KiB
Plaintext
89 lines
3.5 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.
|
|
description: Add social media icons with the socials plugin. Link users to your profiles with recognizable, consistently styled buttons.
|
|
css-plugins: [socials]
|
|
source: core/scss/ui/_social.scss
|
|
classnames:
|
|
component:
|
|
- class: social
|
|
desc: Container element, a square holding one brand mark
|
|
style:
|
|
- class: social-gray
|
|
desc: Grey version of the mark, for a row that should stay quiet
|
|
color:
|
|
- class: social-app-{app}
|
|
desc: The brand to show, for example social-app-github or social-app-x
|
|
size:
|
|
- class: social-{size}
|
|
desc: From social-xxs to social-2xl; the default matches an avatar
|
|
---
|
|
|
|
import Example from '@components/Example.astro'
|
|
import Socials from '@components/Socials.astro'
|
|
import CdnImportPlugin from '@components/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 centered>
|
|
<span class="social social-app-facebook"></span>
|
|
<span class="social social-app-x"></span>
|
|
<span class="social social-app-instagram"></span>
|
|
</Example>
|
|
|
|
## Social icon sizes
|
|
|
|
Social icons use the same size scale as avatars, from `social-xxs` up to `social-2xl`.
|
|
|
|
<Example centered>
|
|
<span class="social social-2xl social-app-facebook"></span>
|
|
<span class="social social-lg social-app-facebook"></span>
|
|
<span class="social social-app-facebook"></span>
|
|
<span class="social social-sm social-app-facebook"></span>
|
|
<span class="social social-xs social-app-facebook"></span>
|
|
</Example>
|
|
|
|
## Grayscale icons
|
|
|
|
Add `social-gray` for a grey version of the mark. Use it where a row of brand colours would pull attention away from the content, for example in a footer.
|
|
|
|
<Example centered>
|
|
<span class="social social-gray social-app-facebook"></span>
|
|
<span class="social social-gray social-app-x"></span>
|
|
<span class="social social-gray social-app-instagram"></span>
|
|
<span class="social social-gray social-app-github"></span>
|
|
</Example>
|
|
|
|
## Icons as links
|
|
|
|
The icon element carries no text, so wrap it in a link and name that link. Keep the name in a `visually-hidden` span, or use `aria-label`.
|
|
|
|
<Example centered>
|
|
<a href="#" class="d-inline-block" aria-label="Tabler on GitHub"><span class="social social-app-github"></span></a>
|
|
<a href="#" class="d-inline-block" aria-label="Tabler on X"><span class="social social-app-x"></span></a>
|
|
</Example>
|
|
|
|
## Social apps list
|
|
|
|
Here is a list of all available social apps:
|
|
|
|
<Socials />
|
|
|
|
## Accessibility
|
|
|
|
- A brand mark is a picture, not a name. Put the service in text next to it, or in an `aria-label` on the link - "Follow us on Mastodon" says more than "Mastodon".
|
|
- The icon element is decoration, so give it `aria-hidden="true"` when the name is already in text.
|
|
- A row of social links belongs in a list inside a `nav` with an `aria-label`, so it can be skipped as a group.
|
|
- Links that open a new tab should say so. Add it to the accessible name, for example "Mastodon (opens in a new tab)".
|
|
- Brand colours are picked to be recognisable, not readable. Check the contrast when you put a brand colour on text or on a light background.
|