Social Classes
Disable Hover Animation
.no-animation
Is there a social provider missing?
Submit a Pull Request!Available Text Styles
.has-text-<social-provider>
.has-text-<social-provider>-light
.has-text-<social-provider>-dark
Available Background Styles
.has-background-<social-provider>
.has-background-<social-provider>-light
.has-background-<social-provider>-dark
Check them out in real projects
Install
npm install bulma-socialBulma-Social is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Ionicons, etc.
Examples
In the examples below, we are goint to use Font Awesome 5.
Start using the buttons as you would normally do adding additionally the social class. For example:
Buttons with text
<a class="button is-medium is-facebook">
<span class="icon">
<i class="fab fa-facebook"></i>
</span>
<span>Facebook</span>
</a>
<a class="button is-medium is-facebook is-outlined">
<span class="icon">
<i class="fab fa-facebook"></i>
</span>
<span>Facebook</span>
</a>
<a class="button is-medium is-facebook is-light">
<span class="icon">
<i class="fab fa-facebook"></i>
</span>
<span>Facebook</span>
</a>
Icon Buttons
<a class="button is-medium is-facebook">
<span class="icon">
<i class="fab fa-facebook fa-lg"></i>
</span>
</a>
<a class="button is-medium is-facebook is-outlined">
<span class="icon">
<i class="fab fa-facebook fa-lg"></i>
</span>
</a>
<a class="button is-medium is-facebook is-light">
<span class="icon">
<i class="fab fa-facebook fa-lg"></i>
</span>
</a>
<a class="button is-medium is-facebook is-inverted">
<span class="icon">
<i class="fab fa-facebook fa-lg"></i>
</span>
</a>
Text colors
<a class="is-size-4 has-text-facebook">Hello Facebook</a>
<a class="is-size-4 has-text-facebook-light">Hello Facebook Light</a>
<a class="is-size-4 has-text-facebook-dark">Hello Facebook Dark</a>
Background colors
<div class="is-size-4 has-background-facebook has-text-white">Hello Facebook</div>
<div class="is-size-4 has-background-facebook-light">Hello Facebook Light</div>
<div class="is-size-4 has-background-facebook-dark has-text-white">Hello Facebook Dark</div>