The Widget Designer has many options to completely customize the Social Icons widget. The Shortcode Designer that works completely independent of the Widget Designer.
The Widget Designer is best used as a sidebar widget (see the Quick Start section).
The Shortcode Designer is best used in a page or post as a short code [ iire_social_icons ]
iRe Social Icons comes with 7 default themes (view samples). Themes can be changed in the Widget/Shortcode Designers anytime.
To change themes, click the pull-down menu and select the desired theme. The theme preview and the contents of the Widget Designer Preivew and the Icons list will update automatically.
Once a theme has been selected, click the “Save Changes” button.
Icon Size & Spacing
Each icon theme is available is 5 sizes (9 in the full version). To modify the icon size and view the changes in real-time, choose a size from the drop-down menu or move the slider.
To adjust the amount of space (default is 10 px) between each icon, choose the desired amount from the drop-down menu or move the slider.
Once an icon size and spacing value has been selected, click the “Save Changes” button.
For advanced users, there are several ways to customize the icon appearance.
To add a shadow, select “Yes” from the Drop Shadow drop-down. To remove the shadow, set the To adjust the color, click the Shadow Color colored input and choose the color from the pop-up color picker or type in the hex color value.
To adjust the distance of the shadow, increase/decrease the amount of the horizontal and vertical offsets. To soften the shadow, increase the blur amount. To sharpen the shadow, decrease the blur amount.
To round the corners of the icons and shadows, select “Yes” from the Rounded Corners drop-down. The radius of each corner can be adjust independently, so shapes like teardrops or rounded rectangles can be easily created.
For example using the 64×64 icons:
– To create a rounded rectangle, set each radius to a smaller value, such as 6 or 8.
– To create a teardrop shape, set top left/bottom right to 43 and the top right/bottom left to 6.
– To create a circle, take the icon size, divide by 2 and set each radius to that value. Example: If the icon size is 64, the radius would be 32.
To add background and hover colors, click on the Up State input and use the pop-up color picker or enter the appropriate hex value. Repeat for the Hover State. The Hover color is displayed when the mouse cursor enters the icon.
To add an animation or CSS visual effect to the icons, select the desired effect from the Effects pull-down menu. Live previews are displayed in the Widget/Shortcode Designers when mouse enters/leave each icon. All icons should return to their normal “state” once the mouse cursor has left the icon or the animation effect is completed. Details of each effect follow:
Note: Although support is added for most major browsers ( Safari, Chrome, Firefox, Opera and IE), not all effects may work identically in all browsers. Use whatever works best for you.
Bounce – A vertical “bouncing” effect that repeats twice. The size of the bounce is determined by the size of the icons.
Drop – Gives the appearance of each icon “sinking” below a horizontal line.
Expand – “Grows” to about 115% of its original size.
Fade In – Changes to fully opaque from the set opacity value.
Fade Out – Changes to the set opacity value from fully opaque.
Flip Horizontal – Animates to a mirror image of the icon on the horizontal (x) axis.
Flip Vertical -Animates to a mirror image of the icon on the vertical (y) axis.
Glow – Creates a box shadow around the outer edges of the icon. Size of the glow is predetermined by the icon size. The color can be specified using the Background Color Hover State
Highlight – Generates a quick partial fade to white, then returns to the original state.
Rotate – Starts a 360 degree clockwise spin while the cursor remains inside the icon. Rotates back to the original position on mouse exit.
Shake – Moves each icon rapidly side-to-side three times.
Shrink – Reduces the icon to about 85% of its original size.
To create semi-transparent icons, adjust the percentage value. Each icon will appear 100% opaque when the mouse cursor enters the icon.
Click the “Save Changes” button when complete, then click “Preview”
Show Alt Tag/ Title
Most browsers support alt/title tags. Each title/description will be shown when the mouse cursor enters each icon. To edit a title, double-click the desired icon in the Widget/Shortcode Designer. Titles are shown by default.
Open Icon Link in New Window
Clicking an icon can show the link in a new tab/window or in the same window. Default is in a new window.
Allow search engines to find icon links. Links are not followed by default.
Click the “Save Changes” button when complete, then click “Preview”
The widget container is the area that the icons are constrained to. The height and width can be adjusted to fit a sidebar or page/post.
– Horizontal – Icons will align next to each other, left to right, thne wrap to the width of the container.
– Vertical – Icons will stack on top of each other in a vertical column.
Aligns the icons to the left or the right inside the container.
Adjusts the dimensions of the container. Use the sliders to adjust the width and height or enter the desired value in the appropriate value.
Adjust the space between the edges of the container and the icons. Insert the desired value in the appropriate field.
Adjusts the space around the outside of the container. Insert the desired value in the appropriate field.
Widget/Shortcode Container Styling
Allows an optional background color and border to the widget container. To show the background options, change Add Background to “Yes”. The default is no background.
To add a background color, click the field to show the color picker or type the hex value into the field.
To set the border color, click the field to show the color picker or type the hex value into the field. You must specify a border width in order to set the border color.
If you are familiar with CSS, you can add custom styling to the widget/shortcode, such as background image or gradients.
Click “Save Changes” when complete to preview the results in the designer.
This plugin includes a built-in contact form that is used with the e-mail icon. Visitors can send their name, email, and a brief message to the recipient.
Add the email address who will receive the message from the widget contact form.
Add any additional email addresses who also will receive a copy the visitor message.
Add any additional email addresses who also will receive a blind copy the visitor message.
Add the appropriate text that will appear in the email subject line. Default is Contact Information.
Add the appropriate text that will appear in the email message.
Enter your email address and activation code that you receive to unlock demo features, such as additional icons.