Advanced Skins for Social Media Feather extends Social Media Feather‘s styling options by adding six skins with transparent backgrounds. Backgrounds, hover effects and other styling may be applied with custom CSS. The skins were created with the help of the Socicon generator.

Get the Advanced Skins for Social Media Feather plugin from the WordPress Plugins repository.

The Skins

The skins added to the Social Media Feather settings are:

How it Works

Social Media Feather has a hook that allows developers to tell it about other icon sets — or skins — that are available to be used. Skins for Social Media Feather passes the information about the new icons’ locations to Social Media Feather, which does the rest.

Once you install and activate the plugin, the new skins appear on Social Media Feather’s own settings page.

Features

• No additional settings to worry about — nothing new is stored in the database.
• Optimized icons.
• Contains support for translations.

Styling Ideas

You can style backgrounds, borders, padding, hover effects, transitions and more by adding custom CSS to your stylesheet. The Social Media Feather plugin adds various classes to the icons.

.synved-social-image { /* put your CSS here */ }

Example 1: Background Color and Rounded Corners

white icon

.synved-social-image {
border-radius: 15px;
background-color: #b38867;
}

Example 2: Background Change on Hover

white icon

.synved-social-image {
background-color: #bbbbbb;
}
.synved-social-image:hover {
background-color: #999999;
}

Example 3: Diagonal Gradient Background

white icon

.synved-social-image {
background: rgb(30,87,153);
background: -moz-linear-gradient(45deg, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
background: linear-gradient(45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=1 );
} /* Created with the Ultimate CSS Gradient Generator */

Example 4: Sepia Filter and Box Shadow

blue icon

Example 5: Hue Rotation Filter and Border

blue icon

.skin-demo-5 {
border: 3px solid #21759b;
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}