Customize Social Bar Icons

You can create custom social icons to use in the social bar in a theme’s default site.

Social icons that appear in the social bar in a site are determined by the design of the site’s theme. If you change the theme for a site, the social icons change with the theme. Common social icons are included with Oracle Content and Experience themes for Facebook, Twitter, LinkedIn, Google+, and YouTube.

You can add custom social icons to the social icon component by editing the design.json and design.css files.

design.json File

In the design.json file, you can specify new icons using the name and class structure as shown in this sample code:

"componenticons": {
    "scs-socialbar" {
        "icons": [
            {
                "name": "COMP_ICON_FACEBOOK",
                "class": "scs-facebook-icon"
            },
            {
                "name": "COMP_ICON_LINKEDIN",
                "class": "scs-linkedin-icon"
            },

            {   "name": "COMP_ICON_TWITTER",
                "class": "scs-twitter-icon"
            },
            {
                "name": "COMP_ICON_GOOGLEPLUS",
                "class": "scs-googleplus-icon"
            },
            {
                "name": "COMP_ICON_YOUTUBE",
                "class" "scs-youtube-icon"
            }
        ]
    }

design.css File

In the design.css file, you can add new icons using the name and url specification as shown in this sample code:

.scs-facebook-icon {
  background-image: url("facebook.png"); }
.scs-twitter-icon {
  background-image: url("twitter.png"); }
.scs-linkedin-icon {
  background-image: url("linkedin.png"); }