Social Icons

14/12/2018

Avada includes a wide range of social icons that can be used in several locations on your site. All social icons are CSS based font icons which ensures that they are high quality, and can be configured using the available options. Continue reading below to learn more about how to set up the social icons, how to customize different settings, and how to display and integrate them.

Overview

Social Media Icons

In this panel, you will find a repeater field to which you can add one social network field at a time. You can add as many social links as you require. You can also add custom social links and icons here, which you can read more about below. To learn more about the Social Media Icons panel, please continue reading below.

IMPORTANT NOTE: The social media icons and links that you insert on this tab will be the icons that will be displayed on your header or footer.

How To Add Social Media Icons

Step 1 - Navigate to Avada > Theme Options > Social Media > Social Media Icons.

Step 2 - In the repeater field dropdown, select the social network that you'd like to add an icon for. For example, Facebook.

Step 3 - Under the 'Link (URL)' field, enter the URL you'd like the social media icon to link to. For example, http://www.facebook.com/avada.

Step 4 - Once done, click the 'Add' button to add it to the list.

Step 5 - To add another social media icon, simply repeat Step 2 to 4.

Step 6 - To delete a social media icon, expand the social media icon tab you'd like to delete, then click the 'Delete' button on the lower right side.

Step 7 - To rearrange the order of the social media icons, simply drag and drop each tab until you achieve your desired order.

Step 8 - Once you're done adding social media links, don't forget to click the 'Save Changes' button.

Header Social Icons

On this tab, you can configure the appearance of the social icons that will be displayed on your header such as the font size, color, layout etc. We've also included a quick guide on how to enable/disable social icons for your header. Please continue reading below to learn about social media icons on your header.

IMPORTANT NOTE: For social media icons to appear on your header, you must enable it and have the appropriate social media links set in the Social Media Icons tab.

How To Display Social Media Icons On Your Header

Step 1 - Navigate to Avada > Theme Options > Header > Header Content.

Step 2 - Choose a header layout #2 - #5 (not available for header layouts 1, 6, 7).

Step 3 - Under 'Header Content 1' or 'Header Content 2' dropdowns, select the Social Links option to display social links on the header.

Step 4 - Don't forget to save your changes by clicking the 'Save Changes' button.

The Header Social Icons Styling

Step 1 - Navigate to Avada > Theme Options > Social Media > Header Social Icons.

Step 2 - On this tab, you will find configuration options such as font size, tooltip position, color, and layout.

Step 3 - When you are done, click the Save Changes button.

Footer Social Icons

Here you can configure the appearance of the social icons that will be displayed on your footer such as its font size, color, layout etc. Please continue reading below to learn how to customize and display social media icons on your footer.

IMPORTANT NOTE: For social media icons to appear on your footer, you must enable it and have the appropriate social media links set in the Social Media Icons tab.

How To Display Social Media Icons In Your Footer

Step 1 - Navigate to Avada > Theme Options > Social Media > Footer Social Icons.

Step 2 - Locate the 'Display Social Icons In The Footer' option and select On.

Step 3 - Under this tab, there are also some options that you can use to customize the appearance of the footer social media icons.

Step 4 - When finished, click the 'Save Changes' button.

The Social Sharing Box

The social sharing box allows your viewers to share any blog or portfolio post using several social media networks. This feature can be enabled or disabled on any blog or portfolio single post page. On this tab, you can customize the social sharing box itself and the social media icons within it. Also in this section, we've included a quick guide on how to enable/disable the social sharing box on blog and portfolio posts. Please continue reading below to learn about the social sharing box.

How To Enable Social Sharing Box In All Single Blog Post Pages

Step 1 - Navigate to Avada > Theme Options > Blog > Blog Single Post.

Step 2 - Locate the Social Sharing Box option, and select 'On' to enable the Social Sharing Box.

Step 3 - Don't forget to save your changes by clicking the 'Save Changes' button.

How To Enable Social Sharing Box In One Single Blog Post Page

Step 1 - Navigate to the blog post you'd like to enable the Social Sharing Box in.

Step 2 - Under Page Options > Post tab, locate the Show Social Share Box option and set it to 'Show'.

Step 3 - Don't forget to save your changes by clicking the Save Draft or Publish.

How To Enable Social Sharing Box In All Single Portfolio Post Pages

Step 1 - Navigate to Avada > Theme Options > Portfolio > Portfolio Single Post.

Step 2 - Locate the Social Sharing Box option, and select 'On' to enable the Social Sharing Box.

Step 3 - Don't forget to save your changes by clicking the 'Save Changes' button.

How To Enable Social Sharing Box In One Single Portfolio Post Page

Step 1 - Navigate to the portfolio post you'd like to enable the Social Sharing Box in.

Step 2 - Under Page Options > Portfolio tab, locate the Show Social Share Box option and set it to 'Show'.

Step 3 - Don't forget to save your changes by clicking the Save Draft or Publish.

How To Style The Social Sharing Box And Icons

Step 1 - Navigate to Avada > Theme Options > Social Media > Social Sharing Box.

Step 2 - Here you will see multiple options for the social sharing box such as the tagline, background color. You'll also find options for the Social Sharing Box Icons such as font size, tooltip position, etc.

Step 3 - Under the Social Share Box Links section, you can select which social links to display on the Social Sharing Box. Simply choose 'On' for the corresponding social link option that you'd like to show. For example, if you'd like your viewers to be able to share your portfolio or blog post on Facebook, then you will need to set the Facebook option to On.

Step 4 - Don't forget to save your changes by clicking the 'Save Changes' button.

How To Add The Sharing Box Element To A Page Or Post

IMPORTANT NOTE: For social links to appear on the sharing box element, you must first set them in the Avada > Theme Options > Social Media > Social Sharing Box panel.

Step 1 - Navigate to the page or post where you'd like to add the sharing box element.

Step 2 - Activate the Fusion Builder by clicking the 'Use Fusion Builder' button.

Step 3 - Add a new Container to the page, and select your desired column layout.

Step 4 - Click the '+ Element' button to bring up the 'Elements' window. Find the Sharing Box element then click it to add it to the page and bring up it's options window.

Step 5 - Customize the Sharing Box element to your liking.

Step 6 - Once finished, click 'Save'.

Social Links Element

The Social Links Element can be inserted in any page or post you create. To learn how to add and customize the Social Links Element, please continue reading below.

How To Add The Social Links Element To A Page Or Post

Step 1 - Navigate to the page or post you'd like to add the Social Links element.

Step 2 - Activate the Fusion Builder by clicking the 'Use Fusion Builder' button on the top of the content editor.

Step 3 - Add a new Container to the page, and select your desired column layout.

Step 4 - Click the '+ Element' button to bring up the 'Elements' window. Find the Social Links element then click it to add it to the page and bring up it's options window.

Step 5 - Add links to the respective social network fields you'd like to display. For example, if you'd like to display the Facebook social icon, you need to add a Facebook link to the Facebook field provided.

Step 6 - Once finished, click 'Save'.

How To Configure Social Links Element Globally

IMPORTANT NOTE: On the 'Fusion Builder Elements' panel, the 'Social Icon Elements' tab controls the global options for both the Social Links element and the Person element.

Step 1 - Navigate to the Avada > Theme Options > Fusion Builder Elements panel.

Step 2 - On this panel, you'll find the 'Social Icon Elements' tab. Under this tab, you'll find several options that allow you to customize the appearance of the Social Links element globally. Please keep in mind that this tab also controls the global options for the Person element.

Step 3 - Once done, click the 'Save Changes' button.

Social Links Widget

You can use the Social Links widget to insert social links to any widget-ready areas of your site; such as the footer, sliding bars, sidebars, mega menu columns, and the like. The Social Links widget does not have any global options in Fusion Theme Options and it only uses the values entered in the widget fields. If fields are left blank, then a hard coded value is inserted. To learn how to add a Social Links widget to widget sections, please continue reading below.

How To Add A Social Links Widget To Widget Sections

Step 1 - Navigate to the Appearance > Widgets tab on your WordPress admin sidebar.

Step 2 - You must first create a widget section. To learn more about this, please refer to our Widgets Section article.

Step 3 - Under the Available Widgets section, locate the 'Avada: Social Links' widget. Then, drag and drop it to the widget section you'd like to add it to.

Step 4 - Once you add it to a widget section, the widget will automatically expand and display all the available customization options. Using these options, you can customize the widget and add your desired social links to their corresponding social network fields. For example, if you'd like to display a Facebook link, then enter that link under the 'Facebook Link' field. View screenshot here.

Step 5 - Once done, click 'Save'.

Social Media Icons Styling

There are several configurable options that makes it easy to style your social media icon's appearance. These options are found in the respective areas where social icons can be displayed. To learn how these options affect the social icons, please continue reading below.

IMPORTANT NOTE: The options to configure a particular set of social media icons depends on the area where they're found. For example, if you'd like to change the social media icons displayed on the header, then you will need to go to the Avada > Theme Options > Social Media > Header Social Icons tab.

Social Icon Font Size

Use this option to increase or decrease the size of the social media icon. For example, 18px.

Social Icon Tooltip Position

Can be Top, Right, Bottom, Left or None. Choose the tooltip's position.

Social Icon Color Type

Can be Custom Colors or Brand Colors. Sets each icon's color to it's brand colors or custom colors.

Social Icon Boxed

Can be On or Off. Use this option to display the social icons in boxes or just icons.

Social Icon Boxed Radius

If the 'Social Icon Boxed' option is set to On, then this option controls the roundness of the box.

Social Icon Boxed Padding

If the 'Social Icon Boxed' option is set to On, then this option controls the interior padding of the icon.

Custom Social Media Icons

Adding custom social media icons allows you to display social networks that are not included on the list. You can also choose to add custom social media icons for existing social networks if you'd prefer to use your own icons. You can add as many custom social media icons as you'd like. To learn how to add custom social media icons, please continue reading the instructions below.

How To Add Custom Social Media Icons

Step 1 - Go to the Avada > Theme Options > Social Media > Social Media Icons panel.

Step 2 - In the repeater field, select 'Custom' from the dropdown. The 'Custom' option is the last option in the dropdown.

Step 3 - Once 'Custom' is selected, the options on the repeater field will change.

Step 4 - Add your custom URL link in the 'Link (URL)' option.

Step 5 - Add your custom tooltip name in the 'Custom Icon Title' field.

Step 6 - Upload your custom icon image by clicking the 'Upload' button, then choose the appropriate image from your computer or media library.

Step 7 - Once you're finished, don't forget to click the 'Save Changes' button.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept