Change Icons

README.md

@@ -42,7 +42,7 @@ For defaults the SocialShareJs put the atual page location as share link but you
 
 ### Custom Query String
 In some of social network shares you could want to put a query string available just to specific social network, so to do that just include  
-**data-ss-_NAME_OF_SOCIAL_MEDIA_  = "key1:value1, key2:value2"** attribute,  
+**data-ss-_NAME_OF_SOCIAL_MEDIA = "key1:value1, key2:value2"** attribute,  
 
 for example  
 
@@ -100,6 +100,16 @@ If you dont want to show the icons of Social Network just include **data-ss-icon
 <div class="ss-box" data-ss-icon="false"></div>
 ```
 
+##### Change Icons
+If you want to change the icon class of any Social Network to another icon of you preference or icon of others packages just include the **data-ss-icon-class** with value **social_name1: icon_class1, social_name2: iconclass2**
+
+for example:
+
+include **data-ss-icon-class="facebook:fab fa-facebook-messenger,email:fas fa-sms"** so it will put the icon **fab fa-facebook-messenger** instead the facebook default icon and it will put the icon **fas fa-sms** instead the email default icon.
+```html
+<div class="ss-box" data-ss-social="facebook, email" data-ss-icon-class="facebook:fab fa-facebook-messenger,email:fas fa-sms"></div>
+```
+
 ### Hover Effects
 
 ##### Grow

index.html

@@ -164,13 +164,32 @@ <h5>Button with Shadows</h5>
 		<br>
 		<div class="ss-box ss-shadow"></div>
 
-		<br>
+		<br><br>
 		<h5>Hide Icons</h5>
 		<p>If you dont want to show the icons of Social Network just include <b>data-ss-icon</b> attribute with value <b>false</b>.</p>		
 		<pre class="alert alert-secondary">&lt;div class="ss-box" data-ss-icon="false"&gt;&lt;/div&gt;</pre>
 		<br>
 		<div class="ss-box" data-ss-icon="false"></div>
 
+		<br><br>
+		<h5>Change Icons</h5>
+		<p>
+			If you want to change the icon class of any Social Network to another icon of you
+			preference or icon of others packages just include the <b>data-ss-icon-class</b>
+			with value <b>social_name1: icon_class1, social_name2: iconclass2</b>
+			<br><br>
+			for example:
+			<br><br>
+			include <b>data-ss-icon-class="facebook:fab fa-facebook-messenger,email:fas fa-sms"</b> so
+			it will put the icon <b>fab fa-facebook-messenger</b> instead the facebook default icon and it will
+			put the icon <b>fas fa-sms</b> instead the email default icon.
+
+		</p>		
+		<pre class="alert alert-secondary">&lt;div class="ss-box" data-ss-social="facebook, email" data-ss-icon-class="facebook:fab fa-facebook-messenger,email:fas fa-sms"&gt;&lt;/div&gt;</pre>
+		<br>
+		<div class="ss-box" data-ss-social="facebook, email" data-ss-icon-class="facebook:fab fa-facebook-messenger,email:fas fa-sms">	
+		</div>
+
 		<br><br>
 		<h3>Hover Effects</h3>
 		<br>

social-share.js

@@ -174,13 +174,38 @@ SocialShare.init = function(){
 				btn.setAttribute("target", "_blank");
 				btn.style.background = SocialShare.btns[j].color;
 
-				// SHOW ICON
-				var showIcon = true;
+				// SOCIAL NETWORK ICON
+				var iconClass = SocialShare.btns[j].iconClass;
+
+				// VERIFY IF ICONS IS CHANGED
+				var definedIcons = SocialShare.boxs[i].getAttribute("data-ss-icon-class");
+
+				if(definedIcons)
+				{
+					var splitedIcons = definedIcons.split(",");
+
+					for(var l = 0; l < splitedIcons.length; l++)
+					{
+						var pairKeyValue = splitedIcons[l].split(":");
+
+						if(pairKeyValue.length > 1)
+						{
+							if(pairKeyValue[0].trim().toLowerCase() == SocialShare.btns[j].social)
+							{
+								iconClass = pairKeyValue[1].trim();
+							}
+						}
+
+					}
+
+				}
 
 				var icon =  document.createElement("i");
-				icon.setAttribute("class", SocialShare.btns[j].iconClass);
+				icon.setAttribute("class", iconClass);
 
 				// VERIFY IF SHOULD SHOW ICON
+				var showIcon = true;
+
 				var verifyIfShowIcon = SocialShare.boxs[i].getAttribute("data-ss-icon");
 
 				if(verifyIfShowIcon && verifyIfShowIcon == "false")