# Social Icons

All your social profile links can be added in **Appearance** -> **Customize** -> **General** -> **Social Icons**

More than 40 known social profile links are supported but you can also add your own as well.

### Adding a Social Icon

To add a link click the :heavy\_plus\_sign: **Add** and select the social profile you want to add:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FxJJ0QO3l7xJ7ITgXWsMO%2FSocial%20Icon%20Add.jpg?alt=media&#x26;token=fb0752d2-aa50-45ed-83aa-c6d1791a82ed" alt="" width="326"><figcaption><p>Adding Social Icon</p></figcaption></figure>

{% hint style="info" %}
If the icon does not exist, you can always add your own by going to the end of list and clicking **Custom Icon**
{% endhint %}

Then a new dialog will open where you can add your social profile details:

* **Label** (optional)
* **Link** (required)
* **Color** (optional) - All brands have their official color assigned

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F1531fqDC2gvNp5ZR5dGX%2FSocial%20Icon%20Label%20and%20Link.jpg?alt=media&#x26;token=0e6fe212-6445-44fb-9cdd-0a64773ad158" alt="" width="319"><figcaption><p>Social Icon details</p></figcaption></figure>

You can add as many social icons of the same icon as you want. Dragging them by mouse will allow you to change the order of display.

### Displaying Social Icons

Now that you have created the social networks, you can add them whenever you want, and that is possible in 2 ways:

#### 1. Header Element

In the Header Builder you can add **Social Icons** element, which provides its set of attributes to change the look of social networks:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FUzS9VHThzsIu7dEIuqoX%2FSocial%20Icons%20Header%20Element.jpg?alt=media&#x26;token=baa9a89d-0e04-4e12-a5ac-fd06440a16dd" alt="" width="326"><figcaption><p>Social Icons element in Header Builder</p></figcaption></figure>

After you add this header element it will display its own options in a new popup dialog where you can change:

* **Display Structure** - Show both icon and label or any of them.
* **Spacing** - Between the social icons.
* **Size** - The size the social icons.
* **Shape** - The surrounding shape of the icon.
* **Responsive Visibility** - Choose the viewport where the element will be visible.
* **Colors** - Set colors for the icon, label and shape.

#### 2. Shortcode

The shortcode can be used for places where you are not able to add social icons using standard user interface for inserting Social Icons. Here is the definition of the shortcode and all its available attributues:

```
[kalium_social_icons label="yes" icon="no" spacing="30"]
```

* **label**\
  Allowed values: *yes*, *no*
* **icon**\
  Allowed values: *yes*, *no*
* **spacing**\
  Allowed values: *numeric*, *numeric with unit* example *1.5em*
* **size**\
  Allowed values: *numeric*, *numeric with unit* example *1.5em*
* **radius**\
  Allowed values: *rounded*, *square*, *numeric*, *numeric with unit* example *1.5em*
* **outline**\
  Allowed values: *yes*, *no* (only set when you add ***radius*** attribute)
* **new\_tab**\
  Allowed values: yes, no
* **no\_follow**\
  Allowed values: yes, no
* **color**\
  Allowed values: *brand* (the official color of the brand), *#ffffff* (any hexadecimal color)
* **color\_hover**\
  Allowed values: *brand*, *any hexadecimal color*
* **label\_color**\
  Allowed values: *brand*, *any hexadecimal color*
* **label\_color\_hover**\
  Allowed values: *brand*, *any hexadecimal color*
* **background**\
  Allowed values: *brand*, *any hexadecimal color* (applied in combination with radius attribute)
* **background\_hover**\
  Allowed values: *brand*, *any hexadecimal color* (applied in combination with radius attribute)

Here is a fully featred example that combines all of these shortcode attributes:

```
[kalium_social_icons icon="yes" label="no" spacing="1.5rem" size="30" radius="20px" outline="no" new_tab="yes" no_follow="yes" color="brand" color_hover="#ffaa00" background="yellow" background_hover="#24b4a2"]
```