March 18, 2020

Lightweight Social Icons Plugin

Looking to add simple social icons to your widget areas? Choose the size and color of your icons, and then choose from 47 different social profiles.

Lightweight Social Icons is an easy to use, lightweight social icon widget which lets you display your favorite social profile icons.

The icons use an icon font, meaning you can choose the size, border radius (roundess), color and hover color of your icons!

Check out GeneratePress, our awesome WordPress theme! (https://wordpress.org/themes/generatepress)

Features include:

Choose your own order
Icon size
Border radius
Background color
Text/icon color
Background color on hover
Text/icon color on hover
Open links in new window
Enable/disable tooltips
Alignment of icons

Included icons:

Facebook
Twitter
Google+
Instagram
LinkedIn
Pinterest
Flickr
Email
RSS
Stumbleupon
Tumblr
Vimeo
YouTube
Github
Soundcloud
DeviantArt
Phone
Skype
Dribbble
Foursquare
Reddit
Spotify
Digg
Vine
Codepen
Delicious
JSFiddle
Stack Overflow
WordPress
Dropbox
Steam
Behance
iTunes
Yelp
500px
AngelList
Blog Lovin’
Paper Plane (Newsletter)
VK
Xing
Bandcamp
BitBucket
Snapchat
Trip Advisor
Houzz
Mixcloud
Last.fm

Installation

There’s two ways to install Lightweight Social Icons.

Go to “Plugins > Add New” in your Dashboard and search for: Lightweight Social Icons
Download the .zip from WordPress.org, and upload the folder to the /wp-content/plugins/ directory via FTP.

In most cases, #1 will work fine and is way easier.

Screenshots

Set your options and choose which social profiles you want to show off.
All of the icons in a widget with tooltips enabled.
Icons with a different color.

FAQ

How do I add a widget with my icons?

Make sure Lightweight Social Icons is activated.
Navigate to “Appearance > Widgets” and look for the “Lightweight Social Icons” widget.
Drag the widget into your desired widget area.

Once the widget is added to a widget area, you can expand it and fill in your profiles.

What options does Lightweight Social Icons have?

Choose your own order
Title (optional): Choose a title for your widget.
Icon size: Choose the size of the icon font.
Border radius: Choose the border radius of the icon. Border radius refers to the “roundness” of the button.
Background color: The background color of the button.
Text Color: The icon color.
Background hover color: The background color of the button when you hover over it.
Text hover color: The color of the icon when you hover over the button.
Open link in a new window?: Choose to open all of the links in a new window/tab.
Alignment: Choose to align the button to the left, center or right.

How do I add my social profile URLs?

In the select box on the left, choose your desired social media site.

To the right of the select box, enter in the URL of your profile on that specific social media site.

The “Skype” option takes your Skype username.

The “Phone” option takes your phone number.

Can I assign different colors to each icon?

Not at this time (without custom CSS of course). We’re hoping to add this feature soon.

Can I display my icons with a shortcode?

Not by default, but you can use a plugin like this: https://wordpress.org/plugins/widget-shortcode/

It allows you to add the widget to an arbitrary widget area, and then you can call that widget using a shortcode elsewhere in your website.

Changelog

1.1

Add rel=”noopener noreferrer” to links opening in new windows

1.0.1

Fix styling issue with themes that don’t add widget ID

1.0

Code cleanup
Fix widget controls in the Customizer
Fix compatibility error with Site Origin Page Builder
Fix color picker labels
Use flexbox for admin controls

0.9

Fix a couple stray PHP notices
New icon: Snapchat
New icon: Trip Advisor
New icon: Houzz
New icon: Mixcloud
New icon: Last.fm
Updated icon: Google+
Updated icon: Instagram
Remove query strings from font
Update text domain to use WP.org translations
Minify style.css

0.8

Fix incompatibility with Custom Sidebars plugin
Hide empty fields by default – click “Add Icon” button to show more fields
Alphabetize list of icons
Disable open in new window with email/contact button
New icon: Xing
New icon: Bandcamp
New icon: BitBucket

0.7

Fix warning

0.6

Allow addition of new icons via lsi_icons_defaults filter

0.5

Fix iTunes icon

0.4

Add filter to rel attribute: lsi_icon_rel_attribute
Add filter to title attribute: lsi_icon_title_attribute
Steam icon added
Behance icon added
iTunes icon added
Yelp icon added
500px icon added
AngelList icon added
Blog Lovin’ icon added
Paper Plane (newsletter) icon added
VK icon added

0.3

Add display:block to ul container
French translation added
Contact can be email address or link to contact page
Fix Skype button
Optimize to work better in Customizer

0.2

Minor changes made

0.1

Initial release