# 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"]
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kaliumtheme.com/other/social-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.