Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In

Social Media Icons

Article ID: ITSKB-3-193

Article Purpose

​This article will show you how to add a list of social media icons to any CommonSpot CMS page.  This is an intermediate tutorial that builds on creating text and links to external websites.  This technique will replace your text link with a 34x34 pixel social media icon.

Needed Materials

Steps to Resolution

  1. Log in and Work on a CMS page
  2. Click the "Gear Icon" of the "Formatted Text Block" you want the list of Social Media Icons
    1. Click "Text"
    2. This brings up the "Formatted Text Block" dialog
      1. Create a list of the social media site(s) you want icons for (example)
        • Facebook
        • YouTube
        • Pinterest
        • Google+
      2. "Create external links" to the sites that you want vistor to go to when they click the icon
      3. Highlight one of the links
      4. Click on "<Anchor>" in the properties inspector at the bottom of the Rich Text Editor
        anchor-properties-inspector.jpg
      5. Select the "requested style (site)" from the CSS Style dropdown beside the Format Dropdowncss-style-dropdown-list.jpg
        available-styles.jpg
      6. "Repeat the above steps 2-5" for the remaining social media sites
      7. Click on "<Unordered List>" in the properties inspector at the bottom of the Rich Text Editor
      8. Select "nobullets" from the CSS Style dropdown beside the Format Dropdown (This will hide the bullets for the list)
      9. Click "Save"

Now when you preview your page you will see a list of icons where the text used to be

Additional Information

The following examples are a before and after of using the image replacements.

Before the Image Replacements

Before Image Replacements

After the Image Replacements and No Bullet Styles

After the Image Replacements and No Bullet Styles

Did this article answer your question?

For additional assistance Contact the IT Call Center at 786-4646.