Icon

Icon Example

This is the shortcode items Simple Square Icon Example. you can get facility in this shortcode item Icon (select icon from icon picker), Background Color, Color, Size, padding, Margin, URL, Class. just simply use this shortcode and get Icon besides you can use line icon here.

Get shortcode

Simple Square Icon Example

					[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="icon: comment" background="#3498db" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="icon: joomla" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="icon: html5" background="#d35400" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="icon: phone-square" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0"]
					
					[icon icon="licon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="licon: alarmclock" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="licon: message-dots" background="#3498db" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="licon: message-check" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="licon: calendar" background="#d35400" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="licon: clock" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0"]
					[icon icon="licon: video" background="#686565" color="#FFF" size="32" padding="20px" radius="0"]
				

Background Icon Example

The shortcode show this items Background Icon Example, You can change background color your like or you can use line icon here.

Get shortcode

Background Icon Example

						[icon icon="icon: facebook" background="#306199" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="icon: twitter" background="#26C4F1" color="#ffffff" size="32" padding="20px" radius="0px" ]
						[icon icon="icon: google-plus" background="#E93F2E" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="icon: github" background="#444444" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="icon: youtube-play" background="#E12A27" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="icon: linkedin" background="#007BB6" color="#ffffff" size="32" padding="20px" radius="0px"]
						
						[icon icon="licon: facebook" background="#306199" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="licon: twitter" background="#26C4F1" color="#ffffff" size="32" padding="20px" radius="0px" ]
						[icon icon="licon: googleplus" background="#E93F2E" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="licon: dribbble" background="#444444" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="licon: rss" background="#E12A27" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="licon: dribbble" background="#007BB6" color="#ffffff" size="32" padding="20px" radius="0px"]
						[icon icon="licon: tumblr" background="#686565" color="#ffffff" size="32" padding="20px" radius="0px"]
					

Icon Color Style Example

You can change always icon color in this shortcode items facility. of course you insert the shortcode.

Get shortcode

Icon Color Style Example

						[icon icon="icon: facebook" background="#f5f5f5" color="#306199" size="32" padding="20px" radius="0"]
						[icon icon="icon: twitter" background="#f5f5f5" color="#26C4F1" size="32" padding="20px" radius="0"]
						[icon icon="icon: google-plus" background="#f5f5f5" color="#E93F2E" size="32" padding="20px" radius="0"]
						[icon icon="icon: github" background="#f5f5f5" color="#444444" size="32" padding="20px" radius="0"]
						[icon icon="icon: youtube-play" background="#f5f5f5" color="#E12A27" size="32" padding="20px" radius="0"]
						[icon icon="icon: linkedin" background="#f5f5f5" color="#007BB6" size="32" padding="20px" radius="0"]
					

Icon Size Example

The shortcode here only look Icon Size Example, if client want use this shortcode please do recently insert shortcode also you can use line icon.

Get shortcode

Icon Size Example

						[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="20" padding="20px" radius="0"]
						[icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="30" padding="20px" radius="0"]
						[icon icon="icon: comment" background="#3498db" color="#FFF" size="40" padding="20px" radius="0"]
						[icon icon="icon:  phone-square" background="#2ecc71" color="#FFF" size="50" padding="20px" radius="0"]
						[icon icon="icon: html5" background="#d35400" color="#FFF" size="60" padding="20px" radius="0"]
						[icon icon="icon:  joomla" background="#8e44ad" color="#FFF" size="70" padding="20px" radius="0"]
						
						[icon icon="licon: download" background="#2c3e50" color="#FFF" size="10" padding="20px" radius="0"]
						[icon icon="licon: edit" background="#f1c40f" color="#FFF" size="20" padding="20px" radius="0"]
						[icon icon="licon: message-check" background="#3498db" color="#FFF" size="30" padding="20px" radius="0"]
						[icon icon="licon:  clock" background="#2ecc71" color="#FFF" size="40" padding="20px" radius="0"]
						[icon icon="licon: layers" background="#d35400" color="#FFF" size="50" padding="20px" radius="0"]
						[icon icon="licon:  lock" background="#1DD4AF" color="#FFF" size="60" padding="20px" radius="0"]
						[icon icon="licon:  recycle" background="#8e44ad" color="#FFF" size="70" padding="20px" radius="0"]
					

Icon Radius Example

You can give line icon and icon radius example in this shortcode, so change your choice.

Get shortcode

Icon Radius Example

						[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="2px"]
						[icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="5px"]
						[icon icon="icon: comment" background="#3498db" color="#FFF" size="32" padding="20px" radius="10px"]
						[icon icon="icon: joomla" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="15px"]
						[icon icon="icon: html5" background="#d35400" color="#FFF" size="32" padding="20px" radius="25px"]
						[icon icon="icon:  windows" background="#7f8c8d" color="#FFF" size="32" padding="20px" radius="100px"]
						
						[icon icon="licon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="2px"]
						[icon icon="licon: tablet" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="5px"]
						[icon icon="licon: message-dots" background="#3498db" color="#FFF" size="32" padding="20px" radius="10px"]
						[icon icon="licon: message-heart" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="15px"]
						[icon icon="licon: video" background="#d35400" color="#FFF" size="32" padding="20px" radius="25px"]
						[icon icon="licon:  clock" background="#7f8c8d" color="#FFF" size="32" padding="20px" radius="300px"]
						[icon icon="licon:  home" background="#7f8c8d" color="#FFF" size="32" padding="20px" radius="100px"]
					

Icon URL Example

This is the very beautiful opportunity in this shortcode items icon URL example, so you can change more URL.

Get shortcode

Icon URL Example

						[icon icon="icon: facebook" background="#306199" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.facebook.com/bdthemes"]
						[icon icon="icon: twitter" background="#26C4F1" color="#ffffff" size="32" padding="20px" radius="2px" url="https://twitter.com/bdthemes"]
						[icon icon="icon: google-plus" background="#E93F2E" color="#ffffff" size="32" padding="20px" radius="2px" url="https://plus.google.com/+Bdthemes"]
						[icon icon="icon: github" background="#444444" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.github.com/bdthemes/"]
						[icon icon="icon: youtube-play" background="#AA0F09" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.youtube.com/user/bdthemes"]
						[icon icon="icon:pinterest" background="#D32A26" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.pinterest.com/bdthemes/graphics/"]
					

Icon With Text Example

This is the very beautiful opportunity in this shortcode items icon URL example, so you can change more icon and line icon URL.

Get shortcode

Icon With Text Example

						[icon icon="icon: facebook" background="#306199" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.facebook.com/bdthemes"]
							Join Us in Facebook 
							[spacer]
						[/icon]
				
						[icon icon="icon: twitter" background="#26C4F1" color="#ffffff" size="16" padding="10px" radius="2px" url="https://twitter.com/bdthemes"]
							Join Us in Twitter 
							[spacer]
						[/icon]
				
						[icon icon="icon: google-plus" background="#E93F2E" color="#ffffff" size="16" padding="10px" radius="2px" url="https://plus.google.com/+Bdthemes"]
							Join Us in Google Plus 
							[spacer]
						[/icon]
						
						[icon icon="licon: facebook" background="#444444" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.github.com/bdthemes/"]Join Us in Facebook[/icon]
						[icon icon="licon: googleplus" background="#AA0F09" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.youtube.com/user/bdthemes"]Join Us in Google Plus[/icon]
						[icon icon="licon: twitter" background="#D32A26" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.pinterest.com/bdthemes/graphics/"]Join Us in Twitter[/icon]
				
						
					

Square Size No Example

This is the shortcode items Simple Square Icon Example. you can get facility in this shortcode item Icon (select icon from icon picker), Background Color, Color, Size, padding, Margin, URL, Class. just simply use this shortcode and get Icon.

Get shortcode

Simple Square Icon Example

					 [icon icon="icon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="icon: comment" background="#3498db" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="icon: joomla" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="icon: html5" background="#d35400" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="icon: phone-square" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="icon: camera" background="#686565" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					
					 [icon icon="licon: pisces" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="licon: arrows-switch-vertical" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="licon: arrows-drag-horiz" background="#3498db" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="licon: arrows-shrink-diagonal2" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="licon: arrows-switch-horizontal" background="#d35400" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="licon: clock" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
					 [icon icon="licon: video" background="#686565" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
				

Need Shortcode Ultimate Documentation?

Click the documentation link and go there for shortcode ultimate plugin documentation!
DOCUMENTATION

Hey Wait Wait!

I hope you you like me! if you want to purchase so please: CLICK FOR DOWNLOAD